# Nattehimmel-gradienter: dypblått, stjerner og måneskinn i kode

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

En troverdig nattehimmel er aldri én flat marineblå. Den har et mørkt senit, en glødende horisont og lys som kommer fra et sted. Her er fargene, kodene og de små detaljene som gjør den overbevisende.

## The short version

- En nattehimmel-gradient er mørkest øverst i bildet og lysest nær horisonten, fordi himmelen rett over oss er lengst unna alt gjenværende lys.
- Ekte nattehimler er sjelden helt svarte: de ligger mellom dyp marineblå, indigo og blågrå, med et varmere eller grønnere bånd ved horisonten.
- Stjerner kan tegnes i CSS med bittesmå radiale gradienter lagt over himmelen, hver gjentatt med ulik flisstørrelse så mønsteret aldri ser ut som et rutenett.
- En måne fungerer best som en liten, lys radial gradient med en bred, svak overgang ut i det omkringliggende blå.
- Mørkeblå gradienter får lett banding, så legg til litt korn og eksporter som PNG eller video i høy kvalitet i stedet for hardt komprimert JPEG.

En **nattehimmel-gradient** er en vertikal overgang som starter nesten svart øverst og løfter seg til en mykere blå nær horisonten, ofte med et svakt varmt eller blågrønt bånd helt nederst. Retningen betyr noe: rett over oss er den mørkeste delen av enhver nattehimmel, og horisonten holder fortsatt litt spredt lys fra byer, solen som har gått ned eller månen. Får du den rekkefølgen riktig, leses selv to farger som natt. Legg til en måne, noen stjerner og litt korn, så leses det som et sted.

## Fargene i en ekte nattehimmel

Ser du på fotografier av himmelen etter mørkets frembrudd, finner du svært lite ekte svart. Senit er en dyp marineblå med et hint av fiolett. Midten av himmelen er indigo eller skifergrå. Horisonten fanger opp det lyset som finnes: oransje fra gatelys, lilla i den blå timen, et svakt grønt under nordlyset på høye breddegrader. Å velge disse som separate fargestopp er det som skiller en nattehimmel fra en generisk [marineblå gradient](https://gradiently.design/nb/guide/navy-gradient).

- Senit: #020611
- Dyp marineblå: #0b1a3a
- Nattblå: #1e3a6e
- Horisontblå: #3b5b8f
- Byens gløt: #8a5a4a
- Måneskinn: #f4f1e3

En brukbar nattpalett: fire blåtoner fra topp til bunn, én varm horisonttone og en månehvit som er litt kremfarget i stedet for helt hvit.

## Koder for nattehimmel-gradienter

Alle disse går fra topp til bunn i 180 grader, så den mørkeste fargen ligger øverst i bildet. Kopier en som den er, eller bytt horisontstoppet for å endre tidspunkt og sted.

- Klar midnatt: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Blå time: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Bylys: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Polarnatt: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Ørkenmørke: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Måneoppgang: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Seks himler. Den blå timen har en lilla horisont, bylyset en natriumoransje, polarnatten et hint av blågrønt, og måneoppgangen er opplyst fra ett lyst punkt.

Legg merke til at stoppene ikke er jevnt fordelt. Mesteparten av bildet forblir mørkt, og fargeendringen skjer i den nederste femtedelen, slik en ekte horisont oppfører seg. Jevn fordeling får himmelen til å se ut som en rampe i stedet for en kuppel. For tanken bak ujevne stopp, se [fargestopp i gradienter](https://gradiently.design/nb/guide/gradient-stops).

## Slik legger du til en måne

En måne er en radial gradient med tre deler: en liten skive i nesten hvitt, et raskt fall til lyseblått og en lang, svak glorie som tones ut i himmelen. Hold skiven liten, rundt 3 til 5 prosent av bildets bredde. En stor, myk måne leses som et lyskasterlys. Plasser den utenfor midten, høyt i et hjørne, så den aldri konkurrerer med overskriften din.

Måne over dyp marineblå: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

Den kremfargede skiven stopper ved 2,5 prosent, den lyseblå ringen ved 4 prosent, og glorien sprer seg til 14 prosent før himmelen tar over.

For å kombinere en måne med et horisontlys legger du den radiale gradienten over en lineær. Guiden om [radial gradient](https://gradiently.design/nb/guide/radial-gradient) forklarer posisjoner og størrelser mer i dybden.

## Slik tegner du stjerner i CSS

Stjerner er bittesmå radiale gradienter: en skarp hvit prikk som stopper en brøkdel av en piksel senere. Gi hvert stjernelag sin egen `background-size` så det gjentas i ulikt tempo. Fliser på 200, 230, 290 og 170 piksler gjentas i utakt, så øyet aldri finner rutenettet. Varier også opasiteten: ekte stjerner er ikke like sterke alle sammen.

```css
.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}
```

Fire stjernelag med ulike flisstørrelser, en måne med gjennomsiktig glorie og den klare midnattshimmelen under.

> **Færre stjerner ser mer ekte ut** Et tett stjernefelt ser ut som støy på en mobilskjerm. Hold stjernene spredt nær horisonten, der lyset vasker dem ut, og la noen få større bære scenen.

## Designideer med nattehimmel-gradient

Nattehimler passer til sene arrangementer, lanseringer, merkevarer innen søvn og velvære, astronomiklubber, musikkutgivelser og alt som skjer etter mørkets frembrudd. Den mørke øvre halvdelen er et naturlig hjem for lys tekst, og den lysere horisonten gir øyet et gulv. Sett overskriften i den øvre midten og hold månen unna den. Krysser ordene horisontbåndet, sjekk at de fortsatt kan leses: [tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) dekker kontrastreglene.

Et stående arrangementsinnlegg for en stjernekikkingskveld, lys tekst satt høyt på en dypblå nattehimmel

Et Instagram-innlegg i 1080×1350, med ordene høyt oppe i den mørke delen av himmelen.

En vertikal story med en kort, rolig overskrift på en midnattsblå gradient for et søvnprodukt

En story i 1080×1920 for et søvnmerke. Det høyere formatet gir mer himmel over ordene.

| Bruk | Størrelse | Hvor lyset går |
| --- | --- | --- |
| Bakgrunnsbilde på mobil | Story-format 1080×1920 | Horisontlys nederst, under docken |
| Toppbilde på nettsted | 1920×1080 | Månen øverst til høyre, overskriften til venstre |
| Arrangementsinnlegg | 1080×1350 | Lyset lavt, ordene høyt |
| Spillelisteomslag | 1080×1080 | Månen liten og utenfor midten |
| Lysbilder | 1920×1080 | Hold himmelen mørk bak tittelen |

Hvor du plasserer de lyse delene av en nattehimmel i vanlige formater.

## Slik unngår du banding i en mørkeblå gradient

Mørkeblått er der [banding i gradienter](https://gradiently.design/nb/guide/gradient-banding) synes best, fordi skjermer har få tydelige trinn mellom de nesten svarte tonene. Spre de mørkeste stoppene over en lengre avstand, legg på et fint støylag med svært lav opasitet, og unngå hard JPEG-komprimering. For mørke paletter generelt har [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) flere oppskrifter, og [galaksegradienter](https://gradiently.design/nb/guide/galaxy-gradient) presser den samme himmelen mot fiolett og magenta.

Vil du heller slippe å bygge korn, lys og lesbarhet for hånd, er Marks i Gradiently levende bakgrunner som gjengis i alle størrelser du designer i, og som roer seg bak ordene dine. Søk i Markedet etter fargeord som «midnatt» eller «dyp marineblå», og design gratis med en hvilken som helst Mark som ingen har sikret seg.

## FAQ

### Hvilke farger lager en nattehimmel-gradient?

Start med en nesten svart marineblå som `#020611` øverst, gå via `#0b1a3a` og `#1e3a6e`, og avslutt med en lysere blå som `#3b5b8f` ved horisonten. Legg til et varmt eller lilla stopp helt nederst for bylys eller den blå timen.

### Hvilken retning bør en nattehimmel-gradient gå?

Fra topp til bunn i 180 grader, mørkest øverst. Himmelen rett over oss er alltid mørkere enn horisonten om natten.

### Hvordan legger jeg til stjerner i en CSS-gradient?

Legg flere bittesmå `radial-gradient()`-prikker over himmelen og gi hvert lag en ulik `background-size`, så gjentakelsene kommer i utakt og aldri ser ut som et rutenett.

### Hvorfor viser den mørkeblå gradienten min striper?

Det er banding: for få fargetrinn over et stort mørkt område. Legg til litt korn, spre de mørke stoppene lenger fra hverandre, og eksporter PNG i stedet for en komprimert JPEG.

### Er en nattehimmel-gradient bra bak tekst?

Ja, lys tekst leses godt på den mørke øvre himmelen. Hold overskriften unna månen og det lyse horisontbåndet.