# Galaxie Farbverlauf: kosmische Codes auf tiefem Weltraum

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

Eine Galaxie ist keine Farbe, sie ist Tiefe: ein dunkler Grund, Wolken aus Licht und weiße Punkte, die darin verstreut sind. Hier sind die Codes und der Aufbau in Ebenen, die sie überzeugend machen.

## The short version

- Ein Galaxie Farbverlauf besteht aus einem fast schwarzen Grund, ein oder zwei sanften Nebelwolken und einer Handvoll kleiner Sterne.
- Radiale Verläufe passen besser zu Galaxien als lineare, weil Nebel von einem hellen Zentrum nach außen glühen.
- Der größte Teil eines Galaxie-Hintergrunds sollte dunkel bleiben, mit Farbe auf vielleicht einem Drittel des Bildes.
- Zwei Nebelfarben weit auseinander zu platzieren vermeidet das schlammige Grau, das entsteht, wo sich Gegenfarben überlagern.
- Sehr dunkle Verläufe zeigen leicht Streifen, ein Galaxie-Hintergrund braucht vor dem Export also eine leichte Körnungsschicht.

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.

- Tiefer Weltraum: #03020a
- Leeres Indigo: #1a1240
- Nebelviolett: #6d28d9
- Kosmisches Magenta: #c026d3
- Tiefes Petrol: #0e7490
- Ionen-Petrol: #2dd4bf
- Glut: #fb923c
- Sternenkern: #fdf4e3

Eine Galaxie-Palette. Wähle den Grund, eine Nebelfamilie und den Sternenkern. Alle Farben auf einmal zu nutzen verwandelt den Weltraum in einen Regenbogen.

## 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.

- Violetter Nebel: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Petrolfarbener Nebel: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Glutroter Nebel: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Rosa kosmischer Staub: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Kern einer Spiralgalaxie: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Milchstraßenband: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Sechs Galaxie-Verläufe. Der Spiralkern nutzt eine abgeflachte Ellipse, und das Milchstraßenband ist ein heller Streifen durch dunklen Himmel.

Willst du etwas Näheres, einen Himmel mit Sternen und Mond statt tiefem Weltraum, sind die Codes für den [Nachthimmel Farbverlauf](https://gradiently.design/de/guide/night-sky-gradient) sanfter. Für Vorhänge aus grünem und violettem Licht sieh dir [Polarlicht Farbverläufe](https://gradiently.design/de/guide/aurora-gradients) 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. **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. **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. **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. **Sterne verstreuen** Winzige radiale Punkte, in zwei oder drei verschiedenen Größen gekachelt, damit sich die Wiederholungen nie zu einem sichtbaren Raster ausrichten.
5. **Mit Körnung abschließen** Eine schwache Rauschschicht über allem verbirgt Banding in den dunklen Bereichen und lässt es fotografisch wirken.

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

Eine komplette Galaxie in einer Regel. Weil die Sternkacheln 180, 260 und 420 Pixel groß sind, wiederholt sich ihr Muster nur dort, wo alle drei zusammentreffen, also selten.

Die radiale Syntax, einschließlich Größen wie `ellipse 60% 25%` und Stopp-Positionen, behandelt [CSS radialer Verlauf](https://gradiently.design/de/guide/css-radial-gradient). Für die Körnungsschicht zeigt [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture) 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](https://gradiently.design/de/guide/muddy-gradients).

### Wirkt schlammig

- Violett, Petrol und Orange überlagern sich alle in der Mitte
- Farbe über das ganze Bild
- Ein neutral grauer oder rein schwarzer Grund
- Sterne in einem ordentlichen, sichtbaren Raster
- Glatte, saubere digitale Fläche mit Banding

### Wirkt wie tiefer Weltraum

- Eine Hauptwolke und ein kleiner Begleiter, weit auseinander
- Farbe auf etwa einem Drittel des Bildes, der Rest dunkel
- Ein indigo oder blau getönter Grund
- Sterne in ungleichen Größen gekachelt
- Feine Körnung über allem

## 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.

Ein breites Design mit tiefem Weltraum-Hintergrund, einer glühenden Farbwolke auf einer Seite und den Worten Launch-Nacht in Weiß

Eine Stream-Ankündigung in YouTube-Thumbnail-Größe. Die Worte sitzen in der dunklen Hälfte; die Farbe lebt auf der anderen Seite.

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

| Einsatz | Größe | Tipp |
| --- | --- | --- |
| Twitch-Offline-Screen | 1920×1080 | Nebel auf einer Seite, Zeitplan auf der dunklen Seite |
| YouTube-Kanalbild | 2560×1440 | Halte den Kern nahe der sicheren Mitte |
| Discord-Server-Banner | 960×540 | Nur eine Wolke; es wird klein angezeigt |
| Handy-Hintergrundbild | 1080×1920 | Setze den Nebel tief, weg von der Uhr |
| Album- oder Playlist-Cover | 1080×1080 | Ein Spiralkern in der Mitte wirkt als Symbol |
| Event-Plakat | A4 mit 300 dpi, 2480×3508 | Der Druck dunkelt tiefe Töne ab, hebe den Grund also leicht an |

Galaxie Farbverläufe sind zu Hause bei Gaming, Musik, Tech und allem, was nachts passiert.

Gaming und Streaming sind die natürliche Heimat, und [Branding für Twitch-Streamer](https://gradiently.design/de/guide/twitch-streamer-branding) 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](https://gradiently.design/de/guide/dark-gradient-backgrounds).

## FAQ

### Welche Farben stecken in einem Galaxie Farbverlauf?

Ein fast schwarzer Grund wie #03020a, eine Nebelfarbe wie Violett #6d28d9, Magenta #c026d3 oder Petrol #2dd4bf und ein heller Kern nahe Weiß. Der größte Teil des Bildes bleibt dunkel.

### Wie mache ich einen Galaxie-Hintergrund in CSS?

Stapele mehrere radiale Verläufe in `background-image`: einen dunklen Grund, ein oder zwei Nebelwolken, die zu transparent auslaufen, und winzige Punkte, mit verschiedenen `background-size`-Werten als Sterne gekachelt.

### Warum sieht mein Weltraum Farbverlauf schlammig aus?

Gegenfarben überlagern sich, und zu viel vom Bild ist farbig. Nutze eine Hauptwolke, halte einen zweiten Farbton weit von ihr entfernt und lass den dunklen Grund dominieren.

### Welche Schriftfarbe funktioniert auf einem Galaxie-Hintergrund?

Weiß oder ein sehr helles Flieder oder Blau, platziert auf dem dunklen Teil des Bildes statt über dem hellen Nebelkern.