# Nachthemelverlopen: diepblauw, sterren en maanlichtcodes

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

Een geloofwaardige nachthemel is nooit één vlak marineblauw. Hij heeft een donker zenit, een gloeiende horizon en licht dat ergens vandaan komt. Dit zijn de kleuren, de codes en de kleine details die het verkopen.

## The short version

- Een nachthemelverloop is het donkerst bovenaan het beeld en het lichtst bij de horizon, omdat de lucht recht boven je het verst van enig nablijvend licht af ligt.
- Echte nachthemels zijn zelden zuiver zwart: ze zitten tussen diep marineblauw, indigo en blauwgrijs, met een warmere of groenere band aan de horizon.
- Sterren kun je in CSS tekenen met kleine radiale verlopen over de hemel, elk herhaald op een andere tegelgrootte zodat het patroon nooit op een raster lijkt.
- Een maan leest het best als een klein, helder radiaal verloop met een brede, zwakke uitloop in het omringende blauw.
- Donkerblauwe verlopen vertonen snel banding, dus voeg lichte korrel toe en exporteer PNG of video van hoge kwaliteit in plaats van zwaar gecomprimeerde JPEG.

Een **nachthemelverloop** is een verticaal mengsel dat bijna zwart begint bovenaan en opklimt naar een zachter blauw bij de horizon, vaak met een zwakke warme of turquoise band helemaal onderaan. Die richting doet ertoe: boven je hoofd is het donkerste deel van elke nachthemel, en de horizon houdt nog wat verstrooid licht vast van steden, de ondergaande zon of de maan. Krijg die volgorde goed en zelfs twee kleuren lezen als nacht. Voeg een maan, een paar sterren en wat korrel toe en het leest als een plek.

## De kleuren van een echte nachthemel

Kijk naar foto’s van de lucht na donker en je vindt heel weinig echt zwart. Het zenit is een diep marineblauw met een vleugje violet. Het midden van de lucht is indigo of leisteen. De horizon pakt op wat er aan licht is: oranje van straatlantaarns, lila in het blauwe uur, een zwak groen onder het noorderlicht op hoge breedtegraden. Deze kiezen als aparte stops onderscheidt een nachthemel van een generiek [marineblauw verloop](https://gradiently.design/nl/guide/navy-gradient).

- Zenit: #020611
- Diep marineblauw: #0b1a3a
- Nachtblauw: #1e3a6e
- Horizonblauw: #3b5b8f
- Stadsgloed: #8a5a4a
- Maanlicht: #f4f1e3

Een werkbaar nachtpalet: vier blauwtinten van boven naar beneden, één warme horizontint en een maanwit dat licht crème is in plaats van zuiver wit.

## Nachthemelverloopcodes

Elk van deze loopt van boven naar beneden op 180 graden, zodat de donkerste kleur bovenaan het beeld zit. Kopieer er een zoals hij is, of wissel de horizonstop om het uur en de omgeving te veranderen.

- Heldere middernacht: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Blauw uur: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Stadsgloed: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Poolnacht: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Woestijndonker: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Maanopkomst: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Zes hemels. Het blauwe uur heeft een lila horizon, de stadsgloed een natriumoranje, de poolnacht een vleugje turquoise, en de maanopkomst wordt vanuit één helder punt verlicht.

Merk op dat de stops niet gelijkmatig verdeeld zijn. Het grootste deel van het beeld blijft donker en de kleurverandering gebeurt in het onderste vijfde, zoals een echte horizon zich gedraagt. Gelijkmatige verdeling laat de hemel op een helling lijken in plaats van op een koepel. Voor de redenering achter ongelijke stops, zie [kleurstops in verlopen](https://gradiently.design/nl/guide/gradient-stops).

## Zo voeg je een maan toe

Een maan is een radiaal verloop met drie delen: een kleine schijf van bijna wit, een snelle daling naar bleekblauw en een lange, zwakke halo die in de hemel vervaagt. Houd de schijf klein, rond 3 tot 5 procent van de beeldbreedte. Een grote, zachte maan leest als een schijnwerper. Plaats hem uit het midden, hoog in een hoek, zodat hij nooit met je kop concurreert.

Maan boven diep marineblauw: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

De crèmekleurige schijf stopt bij 2,5 procent, de bleekblauwe ring bij 4 procent en de halo verspreidt zich tot 14 procent voordat de hemel het overneemt.

Om een maan met een horizongloed te combineren, leg je het radiale verloop boven een lineair verloop. De gids over [radiale verlopen](https://gradiently.design/nl/guide/radial-gradient) legt posities en formaten uitgebreider uit.

## Zo teken je sterren in CSS

Sterren zijn kleine radiale verlopen: een harde witte stip die een fractie van een pixel later stopt. Geef elke sterrenlaag een eigen `background-size` zodat hij in een ander tempo tegelt. Tegels van 200, 230, 290 en 170 pixels herhalen niet gelijktijdig, dus het oog vindt het raster nooit. Varieer ook de dekking: echte sterren zijn niet allemaal even helder.

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

Vier sterrenlagen met verschillende tegelgroottes, een maan met een transparante halo en de heldere middernachthemel eronder.

> **Minder sterren ogen echter** Een dicht sterrenveld ziet er op een telefoonscherm uit als ruis. Houd sterren spaarzaam bij de horizon, waar licht ze wegspoelt, en laat een paar grotere de scène dragen.

## Ontwerpideeën voor nachthemelverlopen

Nachthemels passen bij late evenementen, lanceringen, slaap- en welzijnsmerken, sterrenkundeverenigingen, muziekreleases en alles wat na donker gebeurt. De donkere bovenste helft is een natuurlijk thuis voor lichte letters en de helderdere horizon geeft het oog een vloer. Zet je kop in het bovenste midden en houd de maan eraf. Als de woorden de horizonband kruisen, controleer dan of ze nog lezen: [tekst op een verloop](https://gradiently.design/nl/guide/text-on-gradient) behandelt de contrastregels.

Een staande evenementpost voor een sterrenkijkavond, lichte tekst hoog op een diepblauwe nachthemel

Een Instagram-post op 1080×1350, met de woorden hoog in het donkere deel van de hemel.

Een verticale story met een korte rustige kop op een middernachtblauw verloop voor een slaapproduct

Een story op 1080×1920 voor een slaapmerk. Het hogere beeld laat meer hemel boven de woorden.

| Gebruik | Formaat | Waar het licht heen gaat |
| --- | --- | --- |
| Telefoonachtergrond | Storybeeld 1080×1920 | Horizongloed onderaan, onder het dock |
| Website-hero | 1920×1080 | Maan rechtsboven, kop links |
| Evenementpost | 1080×1350 | Gloed laag, woorden hoog |
| Afspeellijsthoes | 1080×1080 | Maan klein en uit het midden |
| Dia’s | 1920×1080 | Houd de hemel donker achter de titel |

Waar je de heldere delen van een nachthemel plaatst in gangbare formaten.

## Zo voorkom je banding in een donkerblauw verloop

Donkerblauw is waar [banding in verlopen](https://gradiently.design/nl/guide/gradient-banding) het zichtbaarst is, omdat schermen weinig te onderscheiden stappen tussen bijna-zwarte tinten hebben. Verdeel de donkerste stops over een grotere afstand, voeg een fijne ruislaag toe met zeer lage dekking en vermijd zware JPEG-compressie. Voor diepere donkere paletten in het algemeen heeft [donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) meer recepten, en [sterrenstelselverlopen](https://gradiently.design/nl/guide/galaxy-gradient) duwen dezelfde hemel richting violet en magenta.

Wil je de korrel, het licht en de leesbaarheid liever niet met de hand bouwen, dan zijn de Marks van Gradiently levende achtergronden die op elk formaat renderen waarin je ontwerpt en zichzelf kalmeren achter je woorden. Zoek in de Markt op kleurwoorden zoals “middernacht” of “diep marineblauw” en ontwerp gratis met elke ongeclaimde Mark.

## FAQ

### Welke kleuren vormen een nachthemelverloop?

Begin met een bijna zwart marineblauw zoals `#020611` bovenaan, ga via `#0b1a3a` en `#1e3a6e`, en eindig met een lichter blauw zoals `#3b5b8f` aan de horizon. Voeg helemaal onderaan een warme of lila stop toe voor stadslicht of het blauwe uur.

### In welke richting moet een nachthemelverloop lopen?

Van boven naar beneden op 180 graden, bovenaan het donkerst. De lucht boven je is ’s nachts altijd donkerder dan de horizon.

### Hoe voeg ik sterren toe aan een CSS-verloop?

Leg meerdere kleine `radial-gradient()`-stippen over de hemel en geef elke laag een andere `background-size`, zodat de herhalingen niet gelijktijdig vallen en nooit op een raster lijken.

### Waarom toont mijn donkerblauwe verloop strepen?

Dat is banding: te weinig kleurstappen over een groot donker vlak. Voeg wat korrel toe, verdeel de donkere stops verder uit elkaar en exporteer PNG in plaats van een gecomprimeerde JPEG.

### Is een nachthemelverloop goed achter tekst?

Ja, lichte tekst leest goed op de donkere bovenste hemel. Houd de kop weg van de maan en de heldere horizonband.