# Himmelgradienter: koder fra daggry til natt

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

Himmelen er den ene gradienten alle har studert i årevis uten å prøve. Her er koder til alle døgnets timer, i samme rekkefølge som på den ekte himmelen, og råd om tekst på hver av dem.

## The short version

- En overbevisende himmelgradient er dypest øverst og lysest ved horisonten, fordi lys nær horisonten går gjennom mer luft.
- Ved daggry og skumring ligger de varme fargene lavt, nær horisonten, mens kjølige blåtoner holder seg høyt oppe.
- La en himmelgradient gå loddrett med `180deg` i CSS, slik at toppen av designet leses som toppen av himmelen.
- Nattehimmelen ser mer naturlig ut med et litt lysere bånd ved horisonten enn med flatt svart.
- Mørk tekst fungerer på middagshimmel og lavt på en daggryhimmel, mens lys tekst passer høyt på daggryhimmelen, ved skumring, i blåtimen og om natten.

En **himmelgradient** går fra en dypere farge øverst til en lysere ved horisonten, fordi dagslys oppfører seg slik: lys nær horisonten passerer gjennom mer luft, spres mer og nærmer seg hvitt. Får du den retningen riktig, leses nesten enhver blåtone som himmel. Nedenfor finner du koder du kan kopiere til seks tider på døgnet, fra det første lyset til en måneløs natt, med råd om hvor hver passer og hvilken tekstfarge du bør bruke.

## Slik er den ekte himmelen bygget opp

Se opp på en klar dag, og blåfargen rett over deg er rikere enn den nær hustakene. Ved soloppgang og solnedgang krysser sollyset så mye atmosfære at det meste av blått spres bort før det når deg. Da blir rødt, oransje og rosa igjen lavt på himmelen, mens senit holder seg kjølig. Det gir to regler for enhver himmelgradient: dypt øverst, lyst nederst, og varme farger bare nær horisonten.

- Daggryindigo: #2b3a67
- Rosa morgenlys: #e3a6b4
- Senit ved middag: #1f6fd1
- Horisont ved middag: #a9d3f5
- Den gylne timen: #f59e42
- Skumringsmagenta: #b5507a
- Blåtimen: #23407a
- Midnatt: #03050f

Ett døgn med himmel i åtte farger. Hver tid låner to eller tre av disse, alltid med den mørkeste øverst.

## Gradientkoder til daggry og soloppgang

Daggry har døgnets mykeste himmel. Toppen er fortsatt nattindigo, midten blir syrinfarget, og et bånd av rosa og fersken ligger ved horisonten. Den virker stille og håpefull, og passer derfor til velværemerker, morgenrutiner, kunngjøringer av noe nytt og alt som skal føles mildt fremfor høylytt.

- Daggry: indigo til fersken: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Lyst morgenlys: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Soloppgang: syrin til aprikos: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Tre daggryvarianter. De varme fargestoppene stiger aldri over den nederste tredjedelen, så de leses som soloppgang fremfor solnedgang.

## Gradienter til klar middagshimmel og daghimmel

En klar middagshimmel er den klassiske **himmelblå gradienten**: mettet blått øverst som toner over i en lys, nesten hvit blåtone ved horisonten. Hold fargetonen fast, og la lysheten gjøre jobben. Hvis det nederste fargestoppet blir grått fremfor lyseblått, begynner himmelen å virke forurenset. En disig ettermiddag følger samme idé med mindre metning, mens en overskyet dag bytter blått mot kjølig grått.

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

Daghimler. Klar middagshimmel er det folk mener med himmelblått; overskyet passer når du vil ha ro uten farge.

For flere blåtoner utover himmelen, fra marine til is, se kodene til [blå gradienter](https://gradiently.design/nb/guide/blue-gradient). Vil du også ha vannet under himmelen, går artikkelen om [havgradienter](https://gradiently.design/nb/guide/ocean-gradient) motsatt vei: lyst øverst og dypt nederst.

## Koder til den gylne timen, skumring og blåtimen

På kveldshimmelen blir himmelgradienter dramatiske. Den gylne timen beholder dagblått øverst og sterk ravfarge ved horisonten. Det myke, grålige båndet mellom dem finnes i virkeligheten, så ikke kjemp mot det. Skumring senker blått til marineblått og legger til magenta og korall. Blåtimen, den korte stunden etter at solen har gått ned, er nesten helt blå og er en av de mest flatterende mørke bakgrunnene som finnes.

- Den gylne timen: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Skumring: marine til korall: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Blåtimen: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Kveldshimler. Skumringen er den travleste av alle kodene her, så gi den færre ord og mer luft.

Hvis designet ditt går helt over i oransje og rosa uten blått, har du gått fra himmel til solnedgang. Da passer kodene til [solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient) bedre.

## Gradientkoder til nattehimmel

En nattehimmel er sjelden helt svart. Byer, månen og atmosfærens svake glød holder horisonten litt lysere enn senit. Bygg en nattgradient med nesten svart øverst og dyp marineblå horisont, så leses den som himmel. Snu den, så leses den som et hull. For stjerner, måneskinn og mange flere mørke blåtoner, les guiden om [nattehimmelgradienter](https://gradiently.design/nb/guide/night-sky-gradient).

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

Nesten svart øverst og dyp marineblått ved horisonten. Legg fint korn over, fordi en så mørk gradient lett får synlige fargebånd på skjermer.

> **Mørke himler får fargebånd** Kodene til blåtimen og natt beveger seg gjennom svært få tydelige fargeverdier, så skjermer og komprimerte eksportfiler viser synlige trinn. Et lett støylag løser det, som forklart i [fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding).

## Hvilken himmel som passer til hvilket design

| Himmel | Følelse | Passer til | Tekstfarge |
| --- | --- | --- | --- |
| Daggry | Mild, håpefull | Velvære, lanseringer, morgenarrangementer | Hvitt høyt oppe, mørk indigo nær horisonten |
| Klar middagshimmel | Åpen, optimistisk | Reise, apper, sommertilbud | Mørk marineblå |
| Overskyet | Rolig, alvorlig | Rapporter, rolige kunngjøringer | Kullgrå |
| Den gylne timen | Varm, nostalgisk | Hotell og servering, fotografi, bryllup | Mørkebrun eller hvit nær toppen |
| Skumring | Dramatisk, sosial | Arrangementer, musikk, uteliv | Hvit |
| Blåtimen og natt | Eksklusiv, fokusert | Teknologi, film, sene åpningstider | Hvit eller lyseblå |

Et utgangspunkt. Test den faktiske teksten på den faktiske bakgrunnen, fordi én gradient kan trenge mørk tekst i den ene enden og lys i den andre.

Det siste poenget betyr mer for himler enn for de fleste gradienter, siden en himmel bevisst går fra mørkt til lyst. Plasser teksten der himmelen er roligst, og velg tekstfarge for det området fremfor hele gradienten. [Tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) går grundigere inn i det. Gradiently håndterer dette for deg: en Mark holder det roligste området bak ordene, og Auto-tekstfarge velger lys eller mørk tekst linje for linje fra Markens egen palett.

En stående story med daggryfarget bakgrunn og overskriften Oppe før solen i øvre halvdel

En story for en tidlig time. Overskriften står i lys tekst på den rolige øvre himmelen, og detaljene står lavere der lyset er mykest.

## Himmelgradienter til alle formater

Høye formater passer perfekt til himler: en story eller pin kan vise hele stigningen fra horisont til senit. Brede formater presser den sammen, så hold horisontfargene i nederste tredjedel og la den øvre himmelen fylle resten. Det krever ulikt oppsett for hver størrelse, og derfor mister du som regel horisonten når du beskjærer ett bilde til flere formater.

- Story 1080×1920: 1080 × 1920
- Pinterest-pin 1000×1500: 1000 × 1500
- Toppbilde på nettside 1920×1080: 1920 × 1080
- X-toppbilde 1500×500: 1500 × 500

I storyen har himmelen plass til å puste. I toppbildet må det varme horisontbåndet være smalere, ellers sluker det hele bildet.

## En himmelgradient i CSS for alle tider på døgnet

På en nettside er tre egendefinerte egenskaper nok til å beskrive enhver himmel. Bytt én klasse, så skifter hele seksjonen tidspunkt. Det er praktisk for et toppbilde som følger besøkendes lokale tid, eller en side som mørkner etter hvert som en fortelling går fremover.

```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; }
```

Én gradient, fire tidspunkt. Velg klassen med en JavaScript-linje som leser besøkendes klokke, eller sett den manuelt per side.

For vinkler, plassering av fargestopp og reserveløsninger, se [lineær gradient i CSS](https://gradiently.design/nb/guide/css-linear-gradient).

## FAQ

### Hvilke farger gir en himmelgradient?

En daghimmel går fra mettet blått som #1f6fd1 øverst til lyseblått som #dceefb ved horisonten. Daggry og skumring legger til rosa, fersken, magenta eller korall bare nær bunnen.

### Hvilken retning bør en himmelgradient gå?

Fra topp til bunn, med den mørkeste fargen øverst. I CSS er det `linear-gradient(180deg, top, bottom)`.

### Hvordan får jeg en soloppgangsgradient til å skille seg fra solnedgang?

I design virker soloppgang vanligvis mykere og kjøligere, med syrin og fersken og et lavt, smalt varmt bånd. Solnedganger tegnes gjerne mer mettet, med sterkere oransje og magenta som stiger høyere.

### Hvilken tekstfarge fungerer på en himmelblå gradient?

Mørk marineblå eller kullgrå er leselig på middagshimmel og nær en daggryhorisont. Bruk hvitt ved skumring, i blåtimen og om natten, og høyt på en daggryhimmel. Sjekk kontrasten der ordene faktisk står.

### Hvorfor ser nattehimmelgradienten min stripete ut?

Svært mørke gradienter har få fargetrinn, så skjermer viser bånd. Legg til et lett kornlag og eksporter som PNG fremfor en hardt komprimert JPEG.