# Nattehimmel-gradienter: dybe blå, stjerner og måneskinskoder

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

En troværdig nattehimmel er aldrig én flad marineblå. Den har et mørkt zenit, en glødende horisont og lys, der kommer et sted fra. Her er farverne, koderne og de små detaljer, der får den til at virke.

## The short version

- En nattehimmel-gradient er mørkest øverst i billedet og lysest nær horisonten, fordi himlen lige over os er længst væk fra det lys, der stadig hænger ved.
- Rigtige nattehimle er sjældent ren sort: de ligger mellem dyb 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 himlen, hver gentaget i en forskellig flisestørrelse, så mønstret aldrig ligner et gitter.
- En måne fungerer bedst som en lille, lys radial gradient med en bred, svag udtoning ud i den omgivende blå.
- Mørkeblå gradienter får nemt banding, så tilføj let korn, og eksportér PNG eller video i høj kvalitet frem for hårdt komprimeret JPEG.

En **nattehimmel-gradient** er en lodret blanding, der starter næsten sort øverst og løfter sig til en blødere blå nær horisonten, ofte med et svagt varmt eller petrolfarvet bånd helt nederst. Retningen betyder noget: lige over os er den mørkeste del af enhver nattehimmel, og horisonten holder stadig lidt spredt lys fra byer, den nedgående sol eller månen. Får du den rækkefølge rigtig, virker selv to farver som nat. Tilføj en måne, nogle få stjerner og lidt korn, så virker den som et sted.

## Farverne på en rigtig nattehimmel

Ser du på fotografier af himlen efter mørkets frembrud, finder du meget lidt ægte sort. Zenit er en dyb marineblå med et strejf af violet. Midten af himlen er indigo eller skifer. Horisonten opfanger det lys, der er omkring: orange fra gadelygter, syren i den blå time, et svagt grønt under nordlyset på høje breddegrader. At vælge dem som separate stop er det, der adskiller en nattehimmel fra en generisk [marineblå gradient](https://gradiently.design/da/guide/navy-gradient).

- Zenit: #020611
- Dyb marineblå: #0b1a3a
- Natblå: #1e3a6e
- Horisontblå: #3b5b8f
- Byens skær: #8a5a4a
- Måneskin: #f4f1e3

En brugbar natpalet: fire blå fra top til bund, én varm horisonttone og en månehvid, der er let cremefarvet frem for ren hvid.

## Koder til nattehimmel-gradienter

Hver af dem går fra top til bund i 180 grader, så den mørkeste farve sidder øverst i billedet. Kopiér en, som den er, eller skift horisontstoppet ud for at ændre tidspunkt og sted.

- Klar midnat: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Blå time: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Byens skær: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Polarnat: `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åneopgang: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Seks himle. Den blå time har en syrenfarvet horisont, byens skær en natriumorange, polarnatten et strejf af petrol, og måneopgangen er oplyst fra ét lyst punkt.

Læg mærke til, at stoppene ikke har lige stor afstand. Det meste af billedet forbliver mørkt, og farveskiftet sker i den nederste femtedel, sådan som en rigtig horisont opfører sig. Jævn afstand får himlen til at ligne en rampe i stedet for en kuppel. Tankerne bag ujævne stop finder du i [farvestop i gradienter](https://gradiently.design/da/guide/gradient-stops).

## Sådan tilføjer du en måne

En måne er en radial gradient med tre dele: en lille skive af næsten hvid, et hurtigt fald til lyseblå og en lang, svag glorie, der toner ud i himlen. Hold skiven lille, omkring 3 til 5 procent af billedets bredde. En stor, blød måne virker som en projektør. Placér den uden for midten, højt i et hjørne, så den aldrig konkurrerer med din overskrift.

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

Den cremefarvede skive stopper ved 2,5 procent, den lyseblå ring ved 4 procent, og glorien breder sig til 14 procent, før himlen tager over.

Vil du kombinere en måne med et skær ved horisonten, så læg den radiale gradient oven på en lineær. Guiden om [radiale gradienter](https://gradiently.design/da/guide/radial-gradient) forklarer placeringer og størrelser mere i dybden.

## Sådan tegner du stjerner i CSS

Stjerner er bittesmå radiale gradienter: en skarp hvid prik, der stopper en brøkdel af en pixel senere. Giv hvert stjernelag sin egen `background-size`, så det gentages i et forskelligt tempo. Fliser på 200, 230, 290 og 170 pixels gentages ude af takt, så øjet aldrig finder gitteret. Varier også opaciteten: rigtige stjerner har ikke alle samme lysstyrke.

```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 i forskellige flisestørrelser, en måne med en gennemsigtig glorie og den klare midnatshimmel nedenunder.

> **Færre stjerner ser mere ægte ud** Et tæt stjernefelt ligner støj på en telefonskærm. Hold stjernerne spredte nær horisonten, hvor lyset vasker dem ud, og lad nogle få større bære scenen.

## Designidéer med nattehimmel-gradienter

Nattehimle passer til sene arrangementer, lanceringer, brands inden for søvn og wellness, astronomiklubber, musikudgivelser og alt, der foregår efter mørkets frembrud. Den mørke øverste halvdel er et naturligt sted for lys tekst, og den lysere horisont giver øjet et gulv. Sæt din overskrift i den øvre midte, og hold månen væk fra den. Krydser ordene horisontbåndet, så tjek, at de stadig kan læses: [tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) gennemgår kontrastreglerne.

Et stående eventopslag til en stjernekigningsaften med lys tekst højt oppe på en dybblå nattehimmel

Et Instagram-opslag i 1080×1350 med ordene højt oppe i den mørke del af himlen.

En lodret story med en kort, rolig overskrift på en midnatsblå gradient til et søvnprodukt

En story i 1080×1920 til et søvnbrand. Det højere format giver mere himmel over ordene.

| Brug | Størrelse | Hvor lyset skal sidde |
| --- | --- | --- |
| Baggrundsbillede til telefon | Storyformat 1080×1920 | Horisontskær i bunden, under docken |
| Hero på website | 1920×1080 | Måne øverst til højre, overskrift til venstre |
| Eventopslag | 1080×1350 | Skær lavt, ord højt |
| Playlistecover | 1080×1080 | Månen lille og uden for midten |
| Slides | 1920×1080 | Hold himlen mørk bag titlen |

Hvor de lyse dele af en nattehimmel skal placeres i almindelige formater.

## Sådan undgår du banding i en mørkeblå gradient

Mørkeblå er der, hvor [banding i gradienter](https://gradiently.design/da/guide/gradient-banding) er mest synligt, fordi skærme har få tydelige trin mellem næsten-sorte. Spred de mørkeste stop over en længere afstand, tilføj et fint støjlag med meget lav opacitet, og undgå hård JPEG-komprimering. Til mørke paletter generelt har [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) flere opskrifter, og [galaksegradienter](https://gradiently.design/da/guide/galaxy-gradient) skubber den samme himmel ud i violet og magenta.

Vil du hellere slippe for selv at bygge korn, lys og læsbarhed, er Marks i Gradiently levende baggrunde, der gengives i alle de størrelser, du designer i, og falder til ro bag dine ord. Søg i Markedet efter farveord som »midnat« eller »dyb marineblå«, og design gratis med enhver Mark, som ingen har sikret sig.

## FAQ

### Hvilke farver giver en nattehimmel-gradient?

Start med en næsten sort marineblå som `#020611` øverst, gå gennem `#0b1a3a` og `#1e3a6e`, og slut med en lysere blå som `#3b5b8f` ved horisonten. Tilføj et varmt eller syrenfarvet stop helt nederst for bylys eller den blå time.

### Hvilken retning skal en nattehimmel-gradient gå?

Fra top til bund i 180 grader, mørkest øverst. Himlen lige over os er altid mørkere end horisonten om natten.

### Hvordan tilføjer jeg stjerner til en CSS-gradient?

Læg flere bittesmå `radial-gradient()`-prikker over himlen, og giv hvert lag en forskellig `background-size`, så gentagelserne kommer ud af takt og aldrig ligner et gitter.

### Hvorfor har min mørkeblå gradient striber?

Det er banding: for få farvetrin over en stor mørk flade. Tilføj lidt korn, spred de mørke stop længere fra hinanden, og eksportér PNG i stedet for en komprimeret JPEG.

### Er en nattehimmel-gradient god bag tekst?

Ja, lys tekst læses godt på den mørke øvre himmel. Hold overskriften væk fra månen og det lyse horisontbånd.