# Himmelgradienter: koder til daggry, middag, skumring og nat

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

Himlen er den ene gradient, alle har studeret i årevis uden at prøve. Her er koder til hver time af den, i den rækkefølge den rigtige himmel bruger, og hvordan du sætter ord på hver.

## The short version

- En overbevisende himmelgradient er dybest foroven og lysest ved horisonten, fordi lyset nær horisonten rejser gennem mere luft.
- Ved daggry og skumring ligger de varme farver lavt, nær horisonten, og de kølige blå bliver over dig.
- Lad en himmelgradient løbe lodret med `180deg` i CSS, så toppen af designet opfattes som toppen af himlen.
- Nattehimle ser mere naturlige ud med et lidt lysere bånd ved horisonten end med flad sort.
- Mørk skrift læses godt på middagshimle og lavt på en daggryshimmel, mens lys skrift passer til toppen af en daggryshimmel, skumring, blå time og nat.

En **himmelgradient** går fra en dybere farve over dig til en lysere ved horisonten, fordi det er sådan, dagslys opfører sig: lyset nær horisonten passerer gennem mere luft, spredes mere og glider mod hvid. Får du den ene retning rigtig, ligner næsten enhver blå himmel. Nedenfor er koder til kopiering til seks tidspunkter på dagen, fra første lys til en måneløs nat, med noter om, hvor hver virker, og hvilken skriftfarve der passer på den.

## Sådan er den rigtige himmel bygget op

Kig op på en klar dag, og den blå lige over dig er fyldigere end den blå nær tagene. Ved solopgang og solnedgang krydser solens lys så meget atmosfære, at det meste af det blå spredes væk, før det når dig, så røde, orange og lyserøde toner bliver lavt på himlen, mens zenit forbliver kølig. Det giver dig to regler for enhver himmelgradient: dyb foroven, lys forneden og varme farver kun nær horisonten.

- Daggryindigo: #2b3a67
- Rosa første lys: #e3a6b4
- Middagszenit: #1f6fd1
- Middagshorisont: #a9d3f5
- Gyldne time: #f59e42
- Skumringsmagenta: #b5507a
- Blå time: #23407a
- Midnat: #03050f

Én dags himmel i otte farver. Hvert tidspunkt låner to eller tre af dem, altid med den mørkeste øverst.

## Gradientkoder til daggry og solopgang

Daggry er dagens blødeste himmel. Toppen er stadig natteindigo, midten bliver lilla, og et bånd af rosa og fersken ligger på horisonten. Den føles stille og håbefuld, og derfor passer den til wellnessbrands, morgenrutiner, annonceringer af noget nyt og alt, der vil føles blidt frem for højlydt.

- Daggry: indigo til fersken: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Blegt første lys: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Solopgang: lilla til abrikos: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Tre daggry. De varme stop kommer aldrig op over den nederste tredjedel, og det er det, der holder dem som solopgang frem for solnedgang.

## Gradienter til klar middag og dagshimmel

En klar middagshimmel er den klassiske **himmelblå gradient**: mættet blå foroven, der toner ud til en lys, næsten hvid blå ved horisonten. Hold farvetonen stabil, og lad lysheden gøre arbejdet. Bliver det nederste stop gråt frem for lyseblåt, begynder himlen at se forurenet ud. En diset eftermiddag er den samme idé med mindre mætning, og en overskyet dag bytter blå ud med en kølig grå.

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

Dagshimle. Klar middag er den, folk mener med himmelblå; overskyet er nyttig, når du vil have ro uden farve.

For flere blå toner ud over himlen, fra marineblå til is, se koderne til [blå gradienter](https://gradiently.design/da/guide/blue-gradient). Vil du også have vandet under himlen, går artiklen om [havgradienter](https://gradiently.design/da/guide/ocean-gradient) den anden vej: lys foroven, dyb forneden.

## Koder til gyldne time, skumring og blå time

Aftenhimlen er der, hvor himmelgradienter bliver dramatiske. Den gyldne time beholder en dagsblå over dig og en kraftig rav ved horisonten, og det bløde grålige bånd mellem dem er ægte, så kæmp ikke imod det. Skumringen sænker det blå til marine og tilføjer magenta og koral. Den blå time, den korte stund efter at solen er gået ned, er næsten helt blå og en af de mest flatterende mørke baggrunde, der findes.

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

Aftenhimle. Skumringen er den travleste af alle koderne her, så giv den færre ord og mere luft.

Hælder dit design helt mod orange og lyserød uden noget blåt, har du bevæget dig fra himmel til solnedgang, og koderne til [solnedgangsgradienter](https://gradiently.design/da/guide/sunset-gradient) vil tjene dig bedre.

## Gradientkoder til nattehimlen

En nattehimmel er sjældent helt sort. Byer, månen og atmosfærens svage glød holder horisonten en anelse lysere end zenit. Byg en natgradient med en næsten sort top og en dyb marineblå horisont, så ligner den himmel; vend den om, og den ligner et hul. For stjerner, måneskin og mange flere mørkeblå toner, læs guiden om [gradienter til nattehimlen](https://gradiently.design/da/guide/night-sky-gradient).

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

Næsten sort over dig, dyb marineblå ved horisonten. Læg et fint korn ovenpå, fordi en så mørk gradient let bander på skærme.

> **Mørke himle bander** Koder til blå time og nat bevæger sig gennem meget få forskellige farveværdier, så skærme og komprimerede eksporter viser synlige trin. Et let støjlag løser det, som forklaret i [banding i gradienter](https://gradiently.design/da/guide/gradient-banding).

## Hvilken himmel passer til hvilket design

| Himmel | Føles | God til | Skriftfarve |
| --- | --- | --- | --- |
| Daggry | Blid, håbefuld | Wellness, lanceringer, morgenarrangementer | Hvid højt oppe, mørk indigo nær horisonten |
| Klar middag | Åben, optimistisk | Rejser, apps, sommertilbud | Mørk marineblå |
| Overskyet | Rolig, alvorlig | Rapporter, stille annonceringer | Koksgrå |
| Gyldne time | Varm, nostalgisk | Restauration og hoteller, fotografi, bryllupper | Mørkebrun eller hvid nær toppen |
| Skumring | Dramatisk, social | Arrangementer, musik, natteliv | Hvid |
| Blå time og nat | Eksklusiv, fokuseret | Tech, film, sene åbningstider | Hvid eller lyseblå |

Et udgangspunkt. Test dine faktiske ord på din faktiske baggrund, fordi én gradient kan kræve mørk skrift i den ene ende og lys i den anden.

Det sidste punkt betyder mere på himle end på de fleste gradienter, da en himmel per definition går fra mørk til lys. Placér ordene der, hvor himlen er roligst, og vælg skriftfarve til det område, ikke til gradienten som helhed. [Tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) går mere i dybden. I Gradiently klares det for dig: en Mark holder sit roligste område bag ordene, og Automatisk farve vælger lys eller mørk skrift linje for linje ud fra din Marks egen palet.

En lodret story med en baggrund i daggryets farver og overskriften Oppe før solen i den øverste halvdel

En story til et tidligt hold. Overskriften står i lys skrift på den rolige øvre himmel, og detaljerne står lavere, hvor lyset er blødest.

## Himmelgradienter til alle formater

Høje formater passer perfekt til himle: en story eller en pin kan vise hele stigningen fra horisont til zenit. Brede formater klemmer den, så hold horisontfarverne i den nederste tredjedel, og lad den øvre himmel fylde resten. Det er en ny opstilling til hver størrelse, og derfor mister man som regel horisonten, når ét billede beskæres til flere formater.

- Story 1080×1920: 1080 × 1920
- Pinterest-pin 1000×1500: 1000 × 1500
- Heltebillede på hjemmeside 1920×1080: 1920 × 1080
- X-header 1500×500: 1500 × 500

På storyen har himlen plads til at ånde. På headeren skal det varme horisontbånd være tyndere, ellers sluger det rammen.

## En himmelgradient i CSS til alle tider af døgnet

På en hjemmeside er tre custom properties nok til at beskrive enhver himmel. Skift én klasse, og hele sektionen skifter tidspunkt, hvilket er praktisk til et heltebillede, der følger den besøgendes lokale tid, eller en side, der bliver mørkere, efterhånden som en historie skrider frem.

```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 tidspunkter. Vælg klassen med en linje JavaScript, der læser den besøgendes ur, eller sæt den manuelt per side.

For vinkler, placering af stop og reserveløsninger, se [lineær gradient i CSS](https://gradiently.design/da/guide/css-linear-gradient).

## FAQ

### Hvilke farver giver en himmelgradient?

En dagshimmel går fra en mættet blå som #1f6fd1 foroven til en lyseblå som #dceefb ved horisonten. Daggry og skumring tilføjer rosa, fersken, magenta eller koral, men kun nær bunden.

### Hvilken retning skal en himmelgradient gå?

Oppefra og ned med den mørkeste farve øverst. I CSS er det `linear-gradient(180deg, top, bottom)`.

### Hvordan får jeg en solopgangsgradient til at se anderledes ud end en solnedgang?

I design virker solopgang som regel blødere og køligere, med lilla og fersken og det varme bånd lavt og tyndt. Solnedgange tegnes ofte mere mættede, med kraftigere orange og magenta, der når højere op.

### Hvilken tekstfarve virker på en himmelblå gradient?

Mørk marineblå eller koksgrå læses godt på middagshimle og nær horisonten ved daggry. Brug hvid på skumrings-, blå time- og nattehimle og højt på en daggryshimmel, og tjek kontrasten, hvor ordene faktisk står.

### Hvorfor ser min nattehimmelgradient stribet ud?

Meget mørke gradienter har få farvetrin, så skærme viser bånd. Tilføj et let kornlag, og eksportér som PNG frem for en stærkt komprimeret JPEG.