# Natthimmelsgradienter: djupa blå, stjärnor och månljus

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

En trovärdig natthimmel är aldrig en platt marinblå färg. Den har ett mörkt zenit, en glödande horisont och ljus som kommer någonstans ifrån. Här är färgerna, koderna och de små detaljerna som säljer den.

## The short version

- En natthimmelsgradient är mörkast överst i bilden och ljusast nära horisonten, eftersom himlen rakt ovanför ligger längst från allt kvardröjande ljus.
- Riktiga natthimlar är sällan helt svarta: de ligger mellan djup marinblå, indigo och blågrått, med ett varmare eller grönare band vid horisonten.
- Stjärnor kan ritas i CSS med små radiella gradienter lagda över himlen, var och en upprepad i olika rutstorlek så att mönstret aldrig ser ut som ett rutnät.
- En måne läses bäst som en liten, ljus radiell gradient med ett brett, svagt avtagande ut i det omgivande blå.
- Mörkblå gradienter får lätt bandning, så lägg till lätt korn och exportera PNG eller högkvalitativ video i stället för hårt komprimerad JPEG.

En **natthimmelsgradient** är en vertikal blandning som börjar nästan svart överst och lyfter till ett mjukare blått nära horisonten, ofta med ett svagt varmt eller blågrönt band längst ner. Den riktningen spelar roll: det som är rakt ovanför är den mörkaste delen av varje natthimmel, och horisonten bär fortfarande lite spritt ljus från städer, den nedgående solen eller månen. Får du ordningen rätt läses till och med två färger som natt. Lägg till en måne, några stjärnor och lite korn, så läses det som en plats.

## Färgerna i en riktig natthimmel

Titta på fotografier av himlen efter mörkrets inbrott så hittar du mycket lite äkta svart. Zeniten är en djup marinblå med en antydan till violett. Himlens mitt är indigo eller skiffergrått. Horisonten tar upp det ljus som finns: orange från gatlyktor, lila i den blå timmen, en svag grön ton under norrskenet på höga breddgrader. Att välja dessa som separata färgstopp är det som skiljer en natthimmel från en generisk [marinblå gradient](https://gradiently.design/sv/guide/navy-gradient).

- Zenit: #020611
- Djup marinblå: #0b1a3a
- Nattblå: #1e3a6e
- Horisontblå: #3b5b8f
- Stadsljus: #8a5a4a
- Månljus: #f4f1e3

En fungerande nattpalett: fyra blå toner uppifrån och ner, en varm horisontton och ett månvitt som är lite krämigt snarare än rent vitt.

## Koder för natthimmelsgradienter

Var och en av dessa går uppifrån och ner i 180 grader, så den mörkaste färgen hamnar överst i bilden. Kopiera en som den är, eller byt horisontens färgstopp för att ändra timme och miljö.

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

Sex himlar. Den blå timmen har en lila horisont, stadsglöden ett natriumorange, polarnatten en antydan till blågrönt och månuppgången är tänd från en ljus punkt.

Lägg märke till att färgstoppen inte ligger med jämna mellanrum. Det mesta av bilden förblir mörkt, och färgskiftet sker i den nedersta femtedelen, precis som en riktig horisont beter sig. Jämna avstånd får himlen att se ut som en ramp i stället för en kupol. Resonemanget bakom ojämna färgstopp finns i [färgstopp i gradienter](https://gradiently.design/sv/guide/gradient-stops).

## Så lägger du till en måne

En måne är en radiell gradient i tre delar: en liten skiva av nästan vitt, ett snabbt fall till ljusblått och en lång, svag gloria som tonar ut i himlen. Håll skivan liten, ungefär 3 till 5 procent av bildens bredd. En stor, mjuk måne läses som en strålkastare. Placera den ur centrum, högt i ett hörn, så att den aldrig konkurrerar med din rubrik.

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

Den krämfärgade skivan slutar vid 2,5 procent, den ljusblå ringen vid 4 procent och glorian sprider sig till 14 procent innan himlen tar över.

För att kombinera en måne med ett horisontsken, lägg den radiella gradienten ovanpå en linjär. Guiden om [radiell gradient](https://gradiently.design/sv/guide/radial-gradient) förklarar positioner och storlekar mer ingående.

## Så ritar du stjärnor i CSS

Stjärnor är små radiella gradienter: en hård vit prick som slutar en bråkdel av en pixel senare. Ge varje stjärnlager sin egen `background-size` så att det upprepas i olika takt. Rutor på 200, 230, 290 och 170 pixlar upprepas ur takt, så ögat hittar aldrig rutnätet. Variera också opaciteten: riktiga stjärnor är inte lika ljusstarka.

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

Fyra stjärnlager i olika rutstorlekar, en måne med genomskinlig gloria och den klara midnattshimlen under.

> **Färre stjärnor ser mer verkliga ut** Ett tätt stjärnfält ser ut som brus på en telefonskärm. Håll stjärnorna glesa nära horisonten, där ljuset tvättar ut dem, och låt några större bära scenen.

## Designidéer för natthimmelsgradienter

Natthimlar passar sena evenemang, lanseringar, sömn- och välmåendevarumärken, astronomiklubbar, musikutgivningar och allt som händer efter mörkrets inbrott. Den mörka övre halvan är ett naturligt hem för ljus text, och den ljusare horisonten ger ögat ett golv. Sätt din rubrik i övre mitten och håll månen borta från den. Om orden korsar horisontbandet, kontrollera att de fortfarande läses: [text på gradient](https://gradiently.design/sv/guide/text-on-gradient) tar upp kontrastreglerna.

Ett evenemangsinlägg i porträtt för en stjärnskådningskväll, ljus text högt upp på en djupblå natthimmel

Ett Instagram-inlägg i 1080×1350, med orden högt upp i den mörka delen av himlen.

En stående story med en kort lugn rubrik på en midnattsblå gradient för en sömnprodukt

En story i 1080×1920 för ett sömnvarumärke. Den högre bilden lämnar mer himmel ovanför orden.

| Användning | Storlek | Vart ljuset tar vägen |
| --- | --- | --- |
| Mobilbakgrund | Storyformat 1080×1920 | Horisontglöd längst ner, under dockan |
| Webbplatsens hjältesektion | 1920×1080 | Måne uppe till höger, rubrik till vänster |
| Evenemangsinlägg | 1080×1350 | Glöd lågt, ord högt |
| Spellistomslag | 1080×1080 | Månen liten och ur centrum |
| Presentationsbilder | 1920×1080 | Håll himlen mörk bakom titeln |

Var du placerar de ljusa delarna av en natthimmel i vanliga format.

## Så stoppar du bandning i en mörkblå gradient

Mörkblått är där [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding) syns mest, eftersom skärmar har få urskiljbara steg mellan nästan svarta toner. Sprid de mörkaste färgstoppen över ett större avstånd, lägg till ett fint brusskikt med mycket låg opacitet och undvik hård JPEG-komprimering. För djupare mörka paletter i allmänhet har [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) fler recept, och [galaxgradienter](https://gradiently.design/sv/guide/galaxy-gradient) för samma himmel mot violett och magenta.

Vill du slippa handbygga korn, ljus och läsbarhet är Gradiently Marks levande bakgrunder som renderas i varje storlek du designar i och lugnar sig själva bakom dina ord. Sök i Marknaden på färgord som ”midnatt” eller ”djup marinblå” och designa gratis med vilken oclaimad Mark som helst.

## FAQ

### Vilka färger ger en natthimmelsgradient?

Börja med en nästan svart marinblå som `#020611` överst, gå via `#0b1a3a` och `#1e3a6e` och avsluta med ett ljusare blått som `#3b5b8f` vid horisonten. Lägg till ett varmt eller lila färgstopp allra längst ner för stadsljus eller den blå timmen.

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

Uppifrån och ner i 180 grader, mörkast överst. Himlen rakt ovanför är alltid mörkare än horisonten på natten.

### Hur lägger jag till stjärnor i en CSS-gradient?

Lägg flera små `radial-gradient()`-prickar över himlen och ge varje lager en egen `background-size`, så att upprepningarna hamnar ur takt och aldrig ser ut som ett rutnät.

### Varför visar min mörkblå gradient ränder?

Det är bandning: för få färgsteg över en stor mörk yta. Lägg till lite korn, sprid de mörka färgstoppen längre isär och exportera PNG i stället för en komprimerad JPEG.

### Fungerar en natthimmelsgradient bakom text?

Ja, ljus text läses bra mot den mörka övre himlen. Håll rubriken borta från månen och det ljusa horisontbandet.