# Galaxy-kleurverloop: kosmische codes op diepe ruimte

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

Een sterrenstelsel is geen kleur maar diepte: een donkere ondergrond, wolken van licht en puntjes wit die erdoor verspreid liggen. Hier zijn de codes en de gelaagdheid die het overtuigend maken.

## The short version

- Een galaxy-kleurverloop is opgebouwd uit een bijna zwarte ondergrond, een of twee zachte wolken nevelkleur en een verspreiding van kleine sterren.
- Radiale kleurverlopen passen beter bij sterrenstelsels dan lineaire, omdat nevels vanuit een heldere kern naar buiten gloeien.
- Het grootste deel van een galaxy-achtergrond moet donker blijven, met kleur op misschien een derde van het beeld.
- Twee nevelkleuren ver uit elkaar plaatsen voorkomt het modderige grijs dat verschijnt waar tegengestelde tinten overlappen.
- Heel donkere kleurverlopen krijgen snel banding, dus een galaxy-achtergrond heeft vóór het exporteren een lichte korrellaag nodig.

Een **galaxy-kleurverloop** is zachte nevelkleur die uit een bijna zwarte ondergrond gloeit: violette, magenta, turquoise of gloeiende wolken die vervagen in diepe ruimte, meestal met een stuifje kleine sterren erbovenop. Het geheim is verhouding. Echte foto’s van de ruimte zijn voornamelijk donker, en de kleur zit in een of twee wolken en niet over het hele beeld. Hieronder staan kopieerbare codes voor de belangrijkste nevelfamilies en een compleet gelaagd sterrenveld in CSS.

## Wat een kleurverloop op een sterrenstelsel laat lijken

Een overgang van paars naar blauw is gewoon een paars kleurverloop. Het gaat als ruimte lezen zodra het de vier dingen heeft die je oog van sterrenkundige beelden verwacht:

- **Een ondergrond die bijna zwart is**, licht getint met blauw of violet in plaats van neutraal.
- **Nevelwolken** die vanuit een heldere kern gloeien en ongelijk uitvloeien, een klus voor radiale kleurverlopen.
- **Een helderdere kern** in de helderste wolk: een bleek roze, lila of crème dat bijna wit is.
- **Sterren**: veel kleine puntjes wit en lichtblauw, een paar iets grotere, zonder patroon verspreid.

- Diepe ruimte: #03020a
- Leegte-indigo: #1a1240
- Nevelviolet: #6d28d9
- Kosmisch magenta: #c026d3
- Diep turquoise: #0e7490
- Ionenturquoise: #2dd4bf
- Gloed: #fb923c
- Sterrenkern: #fdf4e3

Een galaxy-palet. Kies de ondergrond, één nevelfamilie en de sterrenkern. Alle kleuren tegelijk gebruiken is hoe ruimte een regenboog wordt.

## Codes voor een galaxy-kleurverloop

Elk hiervan is één radiaal kleurverloop dat je in een ontwerptool of stylesheet plakt. Ze wegen bewust naar het donkere uiteinde. Het violette is het klassieke **ruimtekleurverloop**, turquoise voelt kouder en wetenschappelijker, en gloeiend voelt als een stervende ster of een scifi-poster.

- Violette nevel: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Turquoise nevel: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Gloeiende nevel: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Roze kosmisch stof: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Kern van een spiraalstelsel: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Melkwegband: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Zes galaxy-kleurverlopen. De spiraalkern gebruikt een afgeplatte ellips, en de melkwegband is een heldere streep door donkere hemel.

Wil je iets dichter bij huis, een hemel met sterren en een maan in plaats van diepe ruimte, dan zijn de codes van [kleurverloop sterrenhemel](https://gradiently.design/nl/guide/night-sky-gradient) zachter. Voor gordijnen van groen en violet licht, zie [aurora-kleurverlopen](https://gradiently.design/nl/guide/aurora-gradients).

## Bouw een galaxy-achtergrond in CSS, laag voor laag

Eén kleurverloop geeft je een nevel. Een sterrenstelsel ontstaat door er meerdere te stapelen, wat CSS goed kan omdat `background-image` een lijst accepteert. De eerst genoemde laag wordt bovenop geschilderd.

1. **Leg de ondergrond** Een breed radiaal kleurverloop van leegte-indigo in het midden naar diepe ruimte aan de randen, zodat het beeld nooit plat oogt.
2. **Voeg één hoofdnevel toe** Een gekleurd radiaal kleurverloop dat vervaagt naar `transparent`, naast het midden geplaatst, ongeveer waar een derdelijn zou kruisen.
3. **Voeg een tweede, kleinere wolk toe** Een andere tint, ver van de eerste, met lagere dekking. Het voegt diepte toe zonder om aandacht te vechten.
4. **Strooi sterren** Kleine radiale stipjes, tegelsgewijs herhaald in twee of drie verschillende groottes, zodat de herhalingen nooit tot een zichtbaar raster uitlijnen.
5. **Rond af met korrel** Een vage ruislaag over alles verbergt banding in de donkere delen en geeft het een fotografisch gevoel.

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

Een compleet sterrenstelsel in één regel. Omdat de sterrentegels 180, 260 en 420 pixels zijn, herhaalt hun patroon zich alleen waar alle drie samenvallen, en dat is zelden.

De radiale syntaxis, inclusief maten als `ellipse 60% 25%` en stoppposities, staat in [CSS radiaal kleurverloop](https://gradiently.design/nl/guide/css-radial-gradient). Voor de korrellaag heeft [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture) een kopieerbare aanpak met een SVG-filter.

## Een galaxy-kleurverloop niet modderig laten worden

De meest voorkomende fout is een sterrenstelsel dat op een blauwe plek lijkt: kleuren die overlappen tot bruin of grijs, en kleur zo gelijkmatig verspreid dat niets gloeit. Gloed heeft duisternis eromheen nodig. De oplossing is bijna altijd minder kleur, zorgvuldiger geplaatst. De kleurtheorie erachter staat in [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).

### Ziet er modderig uit

- Violet, turquoise en oranje die in het midden allemaal overlappen
- Kleur die het hele beeld bedekt
- Een neutraalgrijze of puur zwarte ondergrond
- Sterren in een netjes zichtbaar raster
- Gladde, schone digitale ondergrond met banding

### Ziet eruit als diepe ruimte

- Eén hoofdwolk en één kleine metgezel, ver uit elkaar
- Kleur op ongeveer een derde van het beeld, de rest donker
- Een ondergrond getint met indigo of blauw
- Sterren in ongelijke groottes herhaald
- Fijne korrel over alles

## Woorden op een galaxy-achtergrond zetten

Galaxy-achtergronden passen bij witte of heel lichte letters, en het best op het donkere deel van het beeld, niet op de heldere nevelkern. Zet de kop in de lege ruimte en laat de wolk aan één kant staan. Sterren achter kleine tekst zijn een echt probleem: ze lijken op verdwaalde punten. Houd het gebied achter lopende tekst vrij van de grotere sterren, of laat de sterren in dat gebied helemaal weg.

Een breed ontwerp met een diepe ruimteachtergrond, een gloeiende kleurwolk aan één kant en de woorden Lanceringsavond in wit

Een streamaankondiging op YouTube-thumbnailformaat. De woorden staan in de donkere helft, de kleur zit aan de andere kant.

Dit is het soort balans dat Gradiently zelf regelt. Een Mark weet waar je woorden staan, verplaatst zijn rustigste, best contrasterende gebied erachter en maakt drukke details bij de letters rustiger, zodat een kosmische achtergrond de kop nooit opslokt. Marks kunnen ook langzame beweging dragen, wat beter bij een sterrenstelsel past dan welk stilstaand beeld ook.

## Waar galaxy-kleurverlopen het best werken

| Gebruik | Formaat | Tip |
| --- | --- | --- |
| Twitch-offlinescherm | 1920×1080 | Nevel aan één kant, schema aan de donkere kant |
| YouTube-kanaalbanner | 2560×1440 | Houd de kern bij de veilige zone in het midden |
| Discord-serverbanner | 960×540 | Eén wolk, want hij wordt klein getoond |
| Telefoonachtergrond | 1080×1920 | Zet de nevel laag, vrij van de klok |
| Album- of afspeellijstcover | 1080×1080 | Een spiraalkern in het midden werkt als symbool |
| Evenementposter | A4 op 300 dpi, 2480×3508 | Druk maakt diepe tinten donkerder, dus til de ondergrond een beetje op |

Galaxy-kleurverlopen zijn thuis in gaming, muziek, tech en alles wat ’s nachts gebeurt.

Gaming en streaming zijn de natuurlijke match, en [branding voor Twitch-streamers](https://gradiently.design/nl/guide/twitch-streamer-branding) laat zien hoe je één look houdt over panelen, banners en overlays. Voor meer donkere ondergronden die gloeien, lees [donkere kleurverloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds).

## FAQ

### Welke kleuren zitten in een galaxy-kleurverloop?

Een bijna zwarte ondergrond zoals #03020a, een nevelkleur zoals violet #6d28d9, magenta #c026d3 of turquoise #2dd4bf en een bleke kern die bijna wit is. Het grootste deel van het beeld blijft donker.

### Hoe maak ik een galaxy-achtergrond in CSS?

Stapel meerdere radiale kleurverlopen in `background-image`: een donkere ondergrond, een of twee nevelwolken die vervagen naar transparant en kleine stipjes met verschillende `background-size`-waarden als sterren.

### Waarom ziet mijn ruimtekleurverloop er modderig uit?

Tegengestelde kleuren overlappen en te veel van het beeld is gekleurd. Gebruik één hoofdwolk, houd een tweede tint ver daarvan vandaan en laat de donkere ondergrond domineren.

### Welke letterkleur werkt op een galaxy-achtergrond?

Wit of een heel bleek lila of blauw, geplaatst op het donkere deel van het beeld en niet over de heldere nevelkern.