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

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.

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.

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.

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.

Um einen Mond mit einem Horizontschein zu kombinieren, leg den radialen Verlauf über einen linearen. Der Leitfaden zum radialen Verlauf 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.

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

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 behandelt die Kontrastregeln.

So verhinderst du Banding in dunkelblauen Verläufen

Dunkelblau ist der Bereich, in dem Banding bei Verläufen 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 weitere Rezepte, und Galaxie Verläufe 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.