# Himmelsgradienter: koder för gryning, middag, skymning och natt

[Canonical HTML page](https://gradiently.design/sv/guide/sky-blue-gradient)

Himlen är den gradient alla studerat i åratal utan att försöka. Här är koder för varje timme av den, i den ordning den verkliga himlen använder, och hur du lägger ord på var och en.

## The short version

- En övertygande himmelsgradient är djupast högst upp och blekast vid horisonten, eftersom ljus nära horisonten färdas genom mer luft.
- Vid gryning och skymning ligger de varma färgerna lågt, nära horisonten, och de svala blå tonerna stannar högt upp.
- Låt en himmelsgradient löpa lodrätt med `180deg` i CSS, så att designens topp läses som himlens topp.
- Nattens himmel ser mer naturlig ut med ett något ljusare band vid horisonten än med platt svart.
- Mörk färg läses bra på middagshimlar och svagt på en gryningshimmel, medan ljus färg passar toppen av en gryningshimmel, skymning, blå timmen och natt.

En **himmelsgradient** går från en djupare färg i zenit till en blekare vid horisonten, eftersom det är så dagsljus beter sig: ljus nära horisonten passerar genom mer luft, sprids mer och drar mot vitt. Får du den enda riktningen rätt läses nästan vilket blått som helst som himmel. Nedan finns kopierbara koder för sex tider på dygnet, från första ljuset till en månlös natt, med anteckningar om var var och en fungerar och vilken färg på text som passar på den.

## Hur den verkliga himlen är ordnad

Titta upp en klar dag och blåtonen rakt ovanför dig är rikare än blåtonen nära hustaken. Vid soluppgång och solnedgång korsar solens ljus så mycket atmosfär att det mesta av det blå sprids bort innan det når dig, vilket lämnar rött, orange och rosa lågt på himlen medan zeniten förblir sval. Det ger dig två regler för varje himmelsgradient: djup upptill, blek nedtill, och varma färger bara nära horisonten.

- Gryningsindigo: #2b3a67
- Första ljusets ros: #e3a6b4
- Middagens zenit: #1f6fd1
- Middagens horisont: #a9d3f5
- Gyllene timmen: #f59e42
- Skymningens magenta: #b5507a
- Blå timmen: #23407a
- Midnatt: #03050f

Ett dygns himmel i åtta färger. Varje tid på dygnet lånar två eller tre av dessa, alltid med den mörkare överst.

## Koder för gryning och soluppgång

Gryningen är dagens mjukaste himmel. Toppen är fortfarande nattindigo, mitten går över i lila och ett band av rosa och persika ligger vid horisonten. Den känns stilla och hoppfull, vilket är varför den passar välmåendevarumärken, morgonrutiner, tillkännagivanden av något nytt och allt som vill kännas milt snarare än högljutt.

- Gryning: indigo till persika: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Blekt första ljus: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Soluppgång: lila till aprikos: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Tre gryningar. De varma stoppen klättrar aldrig över nedre tredjedelen, vilket får dem att läsas som soluppgång snarare än solnedgång.

## Gradienter för klar middag och dagshimmel

En klar middagshimmel är den klassiska **himmelsblå gradienten**: mättat blått upptill som tonar ut till ett blekt, nästan vitt blått vid horisonten. Håll nyansen stadig och låt ljusheten göra jobbet. Om det nedersta stoppet blir grått i stället för blekblått börjar himlen se smutsig ut. En disig eftermiddag är samma idé med lägre mättnad, och en mulen dag byter ut blått mot ett svalt grått.

- Klar middag: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Disig eftermiddag: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Mulet: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Dagshimlar. Klar middag är den folk menar med himmelsblått; mulet är användbart när du vill ha lugn utan färg.

För fler blå toner bortom himlen, från marin till is, se koderna för [blå gradient](https://gradiently.design/sv/guide/blue-gradient). Om du också vill ha vattnet under himlen fungerar artikeln om [havsgradient](https://gradiently.design/sv/guide/ocean-gradient) åt andra hållet: blek överst, djup nederst.

## Koder för gyllene timmen, skymning och blå timmen

Kvällshimlen är där himmelsgradienter blir dramatiska. Gyllene timmen behåller ett dagsblått högst upp och en stark bärnsten vid horisonten, och det mjuka gråaktiga bandet mellan dem är verkligt, så kämpa inte emot det. Skymningen sänker blått till marin och lägger till magenta och korall. Blå timmen, den korta stunden efter att solen gått, är nästan helt blå och är en av de mest smickrande mörka bakgrunderna som finns.

- Gyllene timmen: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Skymning: marin till korall: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Blå timmen: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Kvällshimlar. Skymningen är den mest livliga av alla koder här, så ge den färre ord och mer luft.

Om din design lutar helt åt orange och rosa utan något blått alls har du gått från himmel till solnedgång, och koderna för [solnedgångsgradient](https://gradiently.design/sv/guide/sunset-gradient) tjänar dig bättre.

## Koder för nattens himmel

En natthimmel är sällan helt svart. Städer, månen och atmosfärens svaga sken håller horisonten en aning ljusare än zeniten. Bygg en nattgradient med en nästan svart topp och en djup marin horisont så läses den som himmel; vänd på den och den läses som ett hål. För stjärnor, månsken och många fler mörkblå toner, läs guiden om [gradient för nattens himmel](https://gradiently.design/sv/guide/night-sky-gradient).

Månlös natt: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Nästan svart i zenit, djup marin vid horisonten. Lägg till ett fint korn ovanpå, eftersom en så mörk gradient lätt får ränder på skärmar.

> **Mörka himlar får ränder** Koderna för blå timmen och natt rör sig genom mycket få skilda färgvärden, så skärmar och komprimerade exporter visar synliga steg. Ett lätt brusskikt löser det, som förklaras i [ränder i gradienter](https://gradiently.design/sv/guide/gradient-banding).

## Vilken himmel som passar vilken design

| Himmel | Känns | Bra för | Textfärg |
| --- | --- | --- | --- |
| Gryning | Mild, hoppfull | Välmående, lanseringar, morgonevent | Vit högt upp, mörk indigo nära horisonten |
| Klar middag | Öppen, optimistisk | Resor, appar, sommarerbjudanden | Mörk marin |
| Mulet | Lugn, allvarlig | Rapporter, stilla tillkännagivanden | Kol |
| Gyllene timmen | Varm, nostalgisk | Gästfrihet, fotografi, bröllop | Mörkbrun eller vit nära toppen |
| Skymning | Dramatisk, social | Event, musik, nattliv | Vit |
| Blå timmen och natt | Premium, fokuserad | Tech, film, sena öppettider | Vit eller blekblå |

En utgångspunkt. Testa dina faktiska ord på din faktiska bakgrund, eftersom en enda gradient kan behöva mörk text i ena änden och ljus i den andra.

Den sista punkten spelar större roll på himlar än på de flesta gradienter, eftersom en himmel går från mörk till ljus av design. Placera orden där himlen är lugnast och välj färg för det området, inte för gradienten som helhet. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) går djupare. I Gradiently sköts detta åt dig: en Mark håller sin lugnaste del bakom orden, och Auto-färg väljer ljus eller mörk text rad för rad ur Markens egen palett.

En stående story med en bakgrund i gryningens färger och rubriken Uppe före solen i övre halvan

En story för en tidig klass. Rubriken sitter i ljus text i den lugna övre himlen, och detaljerna längre ner där ljuset är mjukast.

## Himmelsgradienter för varje format

Höga format passar himlar perfekt: en story eller en pin kan visa hela klättringen från horisont till zenit. Breda format trycker ihop den, så håll horisontfärgerna i nedre tredjedelen och låt den övre himlen fylla resten. Det är ett olika upplägg för varje storlek, vilket är varför beskärning av en bild över flera format oftast tappar horisonten.

- Story 1080×1920: 1080 × 1920
- Pinterest-pin 1000×1500: 1000 × 1500
- Webbplatsens hero 1920×1080: 1920 × 1080
- X-huvud 1500×500: 1500 × 500

På storyn har himlen plats att andas. På huvudet måste det varma horisontbandet vara tunnare, annars sväljer det ramen.

## En himmelsgradient i CSS för varje tid på dygnet

På en webbplats räcker tre anpassade egenskaper för att beskriva vilken himmel som helst. Byt en klass och hela sektionen byter timme, vilket är praktiskt för en hero som följer besökarens lokala tid eller en sida som mörknar medan en berättelse fortskrider.

```css
.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }
```

En gradient, fyra timmar. Välj klassen med en rad JavaScript som läser besökarens klocka, eller sätt den för hand per sida.

För vinklar, stopppositioner och reservlösningar, se [CSS linjär gradient](https://gradiently.design/sv/guide/css-linear-gradient).

## FAQ

### Vilka färger bildar en himmelsgradient?

En dagshimmel går från ett mättat blått som #1f6fd1 högst upp till ett blekt blått som #dceefb vid horisonten. Gryning och skymning lägger till rosa, persika, magenta eller korall bara nära botten.

### Åt vilket håll ska en himmelsgradient gå?

Uppifrån och ner, med den mörkaste färgen överst. I CSS är det `linear-gradient(180deg, top, bottom)`.

### Hur får jag en soluppgångsgradient att se annorlunda ut än en solnedgång?

I design läses soluppgång oftast mjukare och svalare, med lila och persika och det varma bandet lågt och tunt. Solnedgångar tenderar att ritas mer mättade, med starkare orange och magenta som klättrar högre.

### Vilken textfärg fungerar på en himmelsblå gradient?

Mörk marin eller kol läses bra på middagshimlar och nära en gryningshorisont. Använd vitt på skymning, blå timmen och natthimlar och högt upp på en gryningshimmel, och kontrollera kontrasten där orden faktiskt sitter.

### Varför ser min nattgradient randig ut?

Mycket mörka gradienter har få färgsteg, så skärmar visar ränder. Lägg till ett lätt kornlager och exportera som PNG i stället för en hårt komprimerad JPEG.