Galaxie Farbverlauf: kosmische Codes auf tiefem Weltraum

Ein Galaxie Farbverlauf ist sanfte Nebelfarbe, die aus einem fast schwarzen Grund glüht: violette, magentafarbene, petrolfarbene oder glutrote Wolken, die in den tiefen Weltraum auslaufen, meist mit einem Hauch winziger Sterne darüber. Das Geheimnis sind die Proportionen. Echte Fotos des Weltraums sind größtenteils dunkel, und die Farbe lebt in ein oder zwei Wolken statt im ganzen Bild. Unten findest du kopierbare Codes für die wichtigsten Nebelfamilien und ein komplettes Sternenfeld in Ebenen in CSS.

Was einen Verlauf wie eine Galaxie aussehen lässt

Eine Mischung von Violett zu Blau ist einfach ein violetter Verlauf. Er wirkt erst wie Weltraum, wenn er die vier Dinge hat, die dein Auge von Astronomiebildern erwartet:

• Ein fast schwarzer Grund, leicht blau oder violett getönt statt neutral.
• Nebelwolken, die von einem hellen Kern glühen und ungleichmäßig auslaufen, ein Job für radiale Verläufe.
• Ein hellerer Kern in der hellsten Wolke: ein blasses Rosa, Flieder oder Creme nahe Weiß.
• Sterne: viele winzige weiße und hellblaue Punkte, ein paar etwas größere, ohne Muster verstreut.

Galaxie Farbverlauf Codes

Jeder davon ist ein einzelner radialer Verlauf, den du in ein Designtool oder ein Stylesheet einfügen kannst. Sie sind bewusst zum dunklen Ende hin gewichtet. Der violette ist der klassische Weltraum Farbverlauf; Petrol wirkt kälter und wissenschaftlicher; Glut wirkt wie ein sterbender Stern oder ein Science-Fiction-Poster.

Willst du etwas Näheres, einen Himmel mit Sternen und Mond statt tiefem Weltraum, sind die Codes für den Nachthimmel Farbverlauf sanfter. Für Vorhänge aus grünem und violettem Licht sieh dir Polarlicht Farbverläufe an.

Einen Galaxie-Hintergrund in CSS bauen, Ebene für Ebene

Ein einzelner Verlauf ergibt einen Nebel. Eine Galaxie entsteht durch das Stapeln mehrerer, was CSS gut kann, weil background-image eine Liste akzeptiert. Die zuerst genannte Ebene wird oben gemalt.

1. 1

   Den Grund legen

   Ein breiter radialer Verlauf von leerem Indigo in der Mitte zu tiefem Weltraum an den Rändern, damit das Bild nie flach wirkt.

2. 2

   Einen Hauptnebel hinzufügen

   Ein farbiger radialer Verlauf, der zu transparent ausläuft, außermittig platziert, etwa dort, wo sich eine Drittellinie kreuzen würde.

3. 3

   Eine zweite, kleinere Wolke hinzufügen

   Ein anderer Farbton, weit vom ersten entfernt, mit geringerer Deckkraft. Er bringt Tiefe, ohne um Aufmerksamkeit zu kämpfen.

4. 4

   Sterne verstreuen

   Winzige radiale Punkte, in zwei oder drei verschiedenen Größen gekachelt, damit sich die Wiederholungen nie zu einem sichtbaren Raster ausrichten.

5. 5

   Mit Körnung abschließen

   Eine schwache Rauschschicht über allem verbirgt Banding in den dunklen Bereichen und lässt es fotografisch wirken.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

Die radiale Syntax, einschließlich Größen wie ellipse 60% 25% und Stopp-Positionen, behandelt CSS radialer Verlauf. Für die Körnungsschicht zeigt CSS-Rauschtextur einen kopierbaren SVG-Filter.

Verhindern, dass ein Galaxie Farbverlauf schlammig wird

Der häufigste Fehler ist eine Galaxie, die wie ein blauer Fleck aussieht: Farben, die sich zu Braun oder Grau überlagern, und Farbe, die so gleichmäßig verteilt ist, dass nichts glüht. Glühen braucht Dunkelheit drumherum. Die Lösung ist fast immer weniger Farbe, sorgfältiger platziert. Die Farbtheorie dahinter steht unter schlammige Farbverläufe.

Worte auf einen Galaxie-Hintergrund setzen

Galaxie-Hintergründe passen zu weißer oder sehr heller Schrift, und am besten auf dem dunklen Teil des Bildes, nicht auf dem hellen Nebelkern. Setze die Überschrift in den leeren Raum und lass die Wolke zu einer Seite sitzen. Sterne hinter kleinem Text sind ein echtes Problem: Sie sehen aus wie verirrte Punkte. Halte den Bereich hinter dem Fließtext frei von größeren Sternen oder lass die Sterne dort ganz weg.

Diese Art von Balance schafft Gradiently von selbst. Ein Mark weiß, wo deine Worte stehen, schiebt seine ruhigste, kontrastreichste Zone dahinter und beruhigt unruhige Details nahe den Buchstaben, sodass ein kosmischer Hintergrund die Überschrift nie verschluckt. Marks können auch langsame Bewegung tragen, die zu einer Galaxie besser passt als jedes Standbild.

Wo Galaxie Farbverläufe am besten wirken

Gaming und Streaming sind die natürliche Heimat, und Branding für Twitch-Streamer zeigt, wie du einen Look über Panels, Banner und Overlays hältst. Mehr dunkle Gründe, die glühen, findest du unter dunkle Verlaufshintergründe.