# Nachthimmel Verläufe: tiefe Blautöne, Sterne und Mondlicht

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

Ein glaubwürdiger Nachthimmel ist nie ein flaches Marineblau. Er hat einen dunklen Zenit, einen leuchtenden Horizont und Licht, das von irgendwoher kommt. Hier sind die Farben, die Codes und die kleinen Details, die ihn überzeugend machen.

## The short version

- Ein Nachthimmel Verlauf ist oben im Bild am dunkelsten und nahe dem Horizont am hellsten, weil der Himmel über uns am weitesten von jedem Restlicht entfernt ist.
- Echte Nachthimmel sind selten reines Schwarz: Sie liegen zwischen tiefem Marineblau, Indigo und Blaugrau, mit einem wärmeren oder grüneren Band am Horizont.
- Sterne lassen sich in CSS mit winzigen radialen Verläufen über dem Himmel zeichnen, jede Ebene mit anderer Kachelgröße wiederholt, damit das Muster nie wie ein Raster aussieht.
- Ein Mond wirkt am besten als kleiner, heller radialer Verlauf mit einem weiten, schwachen Auslauf ins umgebende Blau.
- Dunkelblaue Verläufe neigen zu Banding, also füg leichte Körnung hinzu und exportiere als PNG oder Video in hoher Qualität statt als stark komprimiertes JPEG.

Ein **Nachthimmel Verlauf** ist eine vertikale Mischung, die oben fast schwarz beginnt und nahe dem Horizont in ein weicheres Blau übergeht, oft mit einem schwachen warmen oder petrolfarbenen Band ganz unten. Die Richtung ist wichtig: Über uns liegt der dunkelste Teil jedes Nachthimmels, und der Horizont hält noch ein wenig Streulicht von Städten, der untergegangenen Sonne oder dem Mond. Stimmt diese Reihenfolge, wirken schon zwei Farben wie Nacht. Füg einen Mond, ein paar Sterne und etwas Körnung hinzu, und er wirkt wie ein Ort.

## Die Farben eines echten Nachthimmels

Sieh dir Fotos vom Himmel nach Einbruch der Dunkelheit an, und du findest kaum echtes Schwarz. Der Zenit ist ein tiefes Marineblau mit einem Hauch Violett. Die Mitte des Himmels ist Indigo oder Schiefer. Der Horizont nimmt auf, was an Licht da ist: Orange von Straßenlaternen, Flieder zur blauen Stunde, ein schwaches Grün unter dem Polarlicht in hohen Breiten. Diese Töne als eigene Farbstopps zu wählen, unterscheidet einen Nachthimmel von einem beliebigen [Marineblau Verlauf](https://gradiently.design/de/guide/navy-gradient).

- Zenit: #020611
- Tiefes Marineblau: #0b1a3a
- Nachtblau: #1e3a6e
- Horizontblau: #3b5b8f
- Stadtschein: #8a5a4a
- Mondlicht: #f4f1e3

Eine brauchbare Nachtpalette: vier Blautöne von oben nach unten, ein warmer Horizontton und ein Mondweiß, das leicht cremig statt reinweiß ist.

## Nachthimmel Verlauf Codes

Jeder davon läuft mit 180 Grad von oben nach unten, die dunkelste Farbe sitzt also oben im Bild. Kopier einen so, wie er ist, oder tausch den Horizontstopp, um Uhrzeit und Umgebung zu ändern.

- Klare Mitternacht: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Blaue Stunde: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Stadtschein: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Polarnacht: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Wüstendunkel: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Mondaufgang: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Sechs Himmel. Die blaue Stunde hat einen fliederfarbenen Horizont, der Stadtschein ein Natriumorange, die Polarnacht einen Hauch Petrol, und der Mondaufgang wird von einem hellen Punkt aus beleuchtet.

Die Farbstopps sind nicht gleichmäßig verteilt. Der größte Teil des Bildes bleibt dunkel, und der Farbwechsel passiert im untersten Fünftel, so wie sich ein echter Horizont verhält. Gleichmäßige Abstände lassen den Himmel wie eine Rampe statt wie eine Kuppel aussehen. Die Überlegung hinter ungleichmäßigen Stopps findest du unter [Farbstopps im Verlauf](https://gradiently.design/de/guide/gradient-stops).

## So fügst du einen Mond hinzu

Ein Mond ist ein radialer Verlauf mit drei Teilen: eine kleine Scheibe in fast Weiß, ein schneller Abfall in blasses Blau und ein langer, schwacher Hof, der im Himmel ausläuft. Halte die Scheibe klein, etwa 3 bis 5 Prozent der Bildbreite. Ein großer, weicher Mond wirkt wie ein Scheinwerfer. Setz ihn außermittig, hoch in eine Ecke, damit er nie mit deiner Headline konkurriert.

Mond über tiefem Marineblau: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

Die cremige Scheibe endet bei 2,5 Prozent, der blassblaue Ring bei 4 Prozent, und der Hof breitet sich bis 14 Prozent aus, bevor der Himmel übernimmt.

Um einen Mond mit einem Horizontschein zu kombinieren, leg den radialen Verlauf über einen linearen. Der Leitfaden zum [radialen Verlauf](https://gradiently.design/de/guide/radial-gradient) erklärt Positionen und Größen genauer.

## So zeichnest du Sterne in CSS

Sterne sind winzige radiale Verläufe: ein harter weißer Punkt, der einen Bruchteil eines Pixels später endet. Gib jeder Sternebene ihre eigene `background-size`, damit sie in einem anderen Rhythmus kachelt. Kacheln von 200, 230, 290 und 170 Pixeln wiederholen sich versetzt, sodass das Auge nie das Raster findet. Variiere auch die Deckkraft: Echte Sterne sind nicht alle gleich hell.

```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 Sternebenen mit unterschiedlichen Kachelgrößen, ein Mond mit transparentem Hof und darunter der Himmel Klare Mitternacht.

> **Weniger Sterne wirken echter** Ein dichtes Sternenfeld sieht auf einem Handybildschirm wie Rauschen aus. Halte Sterne nahe dem Horizont spärlich, wo das Licht sie überstrahlt, und lass ein paar größere die Szene tragen.

## Designideen mit Nachthimmel Verläufen

Nachthimmel passen zu späten Events, Launches, Marken rund um Schlaf und Wohlbefinden, Astronomievereinen, Musikveröffentlichungen und allem, was nach Einbruch der Dunkelheit passiert. Die dunkle obere Hälfte ist ein natürlicher Ort für helle Schrift, und der hellere Horizont gibt dem Auge einen Boden. Setz deine Headline in die obere Mitte und halte den Mond von ihr fern. Kreuzen die Worte das Horizontband, prüf, ob sie noch lesbar sind: [Text auf einem Verlauf](https://gradiently.design/de/guide/text-on-gradient) behandelt die Kontrastregeln.

Ein Event Post im Hochformat für einen Sternenabend, heller Text hoch auf einem tiefblauen Nachthimmel

Ein Instagram Post in 1080×1350, mit den Worten hoch im dunklen Teil des Himmels.

Eine Story im Hochformat mit kurzer, ruhiger Headline auf einem mitternachtsblauen Verlauf für ein Schlafprodukt

Eine Story in 1080×1920 für eine Schlafmarke. Das höhere Format lässt mehr Himmel über den Worten.

| Einsatz | Größe | Wohin das Licht kommt |
| --- | --- | --- |
| Handy Hintergrundbild | Story Format 1080×1920 | Horizontschein unten, unterhalb des Docks |
| Website Hero | 1920×1080 | Mond oben rechts, Headline links |
| Event Post | 1080×1350 | Schein unten, Worte oben |
| Playlist Cover | 1080×1080 | Mond klein und außermittig |
| Folien | 1920×1080 | Himmel hinter dem Titel dunkel halten |

Wo die hellen Teile eines Nachthimmels in gängigen Formaten hingehören.

## So verhinderst du Banding in dunkelblauen Verläufen

Dunkelblau ist der Bereich, in dem [Banding bei Verläufen](https://gradiently.design/de/guide/gradient-banding) am deutlichsten sichtbar ist, weil Bildschirme zwischen Fast Schwarztönen nur wenige unterscheidbare Stufen haben. Verteil die dunkelsten Stopps über eine größere Strecke, füg eine feine Rauschebene mit sehr geringer Deckkraft hinzu und vermeide starke JPEG Kompression. Für tiefe, dunkle Paletten allgemein hat [dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) weitere Rezepte, und [Galaxie Verläufe](https://gradiently.design/de/guide/galaxy-gradient) treiben denselben Himmel in Violett und Magenta.

Wenn du Körnung, Licht und Lesbarkeit lieber nicht von Hand bauen willst: Die Marks von Gradiently sind lebendige Hintergründe, die in jeder Größe rendern, in der du gestaltest, und sich hinter deinen Worten von selbst beruhigen. Durchsuche den Markt nach Farbwörtern wie „Mitternacht“ oder „tiefes Marineblau“ und gestalte kostenlos mit jedem nicht gesicherten Mark.

## FAQ

### Welche Farben ergeben einen Nachthimmel Verlauf?

Beginn oben mit einem fast schwarzen Marineblau wie `#020611`, geh über `#0b1a3a` und `#1e3a6e` und ende am Horizont mit einem helleren Blau wie `#3b5b8f`. Füg ganz unten einen warmen oder fliederfarbenen Stopp für Stadtlicht oder die blaue Stunde hinzu.

### In welche Richtung sollte ein Nachthimmel Verlauf laufen?

Von oben nach unten mit 180 Grad, oben am dunkelsten. Der Himmel über uns ist nachts immer dunkler als der Horizont.

### Wie füge ich einem CSS Verlauf Sterne hinzu?

Leg mehrere winzige `radial-gradient()` Punkte über den Himmel und gib jeder Ebene eine andere `background-size`, damit die Wiederholungen versetzt fallen und nie wie ein Raster aussehen.

### Warum zeigt mein dunkelblauer Verlauf Streifen?

Das ist Banding: zu wenige Farbstufen über eine große dunkle Fläche. Füg etwas Körnung hinzu, zieh die dunklen Stopps weiter auseinander und exportiere als PNG statt als komprimiertes JPEG.

### Eignet sich ein Nachthimmel Verlauf als Hintergrund für Text?

Ja, helle Schrift liest sich gut auf dem dunklen oberen Himmel. Halte die Headline vom Mond und vom hellen Horizontband fern.