# Aurora-kleurverlopen: zacht licht, goed gedaan

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

Aurora-kleurverlopen lenen de look van het noorderlicht: lichtgevende sluiers van kleur die over duisternis drijven. Ze zijn mooi, en ze kantelen snel naar screensaver-gebied. Zo houd je ze aan de goede kant.

## The short version

- Een aurora-kleurverloop is een donkere achtergrond met zachte, sterk vervaagde plassen of sluiers van lichtgevende kleur, naar het voorbeeld van het noorderlicht.
- Aurora-kleurverlopen werken omdat lichte kleuren op een bijna zwarte ondergrond lijken te gloeien, zoals echt licht dat ’s nachts doet.
- De meest overtuigende aurora-paletten blijven dicht bij de kleuren van het echte noorderlicht: groen, petrol, violet en een vleugje roze.
- Een aurora-kleurverloop lijkt op een screensaver als het te veel verzadigde kleuren gebruikt, te snel beweegt of het hele beeld gelijkmatig vult.
- Tekst op een aurora hoort in het donkerste gebied, met de helderste sluier uit de buurt van de woorden.

Een **aurora-kleurverloop** is een achtergrond van zachte, lichtgevende kleur die boven een donkere ondergrond zweeft, zoals het noorderlicht: sluiers van groen, petrol en violet die lijken te gloeien in plaats van op het oppervlak te liggen. Technisch is het een set sterk vervaagde kleurplassen of banden op een bijna zwarte basis, vaak zeer langzaam bewegend. Het is een van de meest sfeervolle looks die een kleurverloop kan hebben, en een van de makkelijkste om te overdrijven.

## Wat een aurora-kleurverloop anders maakt

Drie dingen scheiden een aurora van een gewoon donker kleurverloop. Ten eerste is de ondergrond heel donker, dicht bij zwart, dus elke kleur erop leest als licht. Ten tweede komt de kleur in zachte, ongelijke sluiers of plassen in plaats van een gladde helling van de ene kant naar de andere. Ten derde zijn de randen extreem vervaagd, zodat niets een vorm heeft die je kunt volgen. Samen wekken ze de indruk van licht in lucht in plaats van verf op een muur.

- Noordelijk groen: `radial-gradient(ellipse 80% 38% at 50% 32%, #6ee7b7 0%, #10b981 22%, #064e3b 48%, #020617 80%)`
- Violette sluier: `radial-gradient(ellipse 75% 40% at 40% 30%, #c4b5fd 0%, #7c3aed 25%, #2e1065 52%, #05030f 82%)`
- Arctisch petrol: `radial-gradient(ellipse 85% 35% at 60% 28%, #67e8f9 0%, #0891b2 25%, #083344 50%, #020617 80%)`
- Roze schemer: `radial-gradient(ellipse 80% 38% at 45% 30%, #fda4af 0%, #e11d48 22%, #4c0519 50%, #0a0206 80%)`

Aurora-schetsen met één laag: een brede, platte ellips van licht hoog in het beeld, uitlopend naar bijna zwart. Echte aurora-vlakken stapelen er meerdere.

## Aurora-paletten die werken

Het echte noorderlicht krijgt zijn kleuren van gassen hoog in de atmosfeer: zuurstof geeft het bekende groen en, hoger, een diep rood, terwijl stikstof blauw en paars toevoegt. Dicht bij die familie blijven is waarom sommige aurora-kleurverlopen natuurlijk lijken en andere op een nachtclub. Begin met een groen of petrol, voeg een violet toe en gebruik roze of rood als zeldzaam accent.

- Poolnacht: #030712
- Diepe spar: #064e3b
- Aurora-groen: #34d399
- Gletsjerpetrol: #22d3ee
- Hoog violet: #8b5cf6
- Zeldzaam roze: #fb7185

Een aurora-palet naar het echte voorbeeld. Groen en petrol dragen het vlak, violet voegt diepte toe, roze verschijnt alleen aan één rand.

Je kunt natuurlijk afwijken van de natuur. Warme aurora’s in amber en koraal, of monochrome in één blauw, werken allebei, zolang de ondergrond donker blijft en de kleuren buren blijven. Voor meer over kleuren kiezen die bij elkaar passen, zie [analoge kleuren](https://gradiently.design/nl/guide/analogous-colors).

## Zo voorkom je dat een aurora op een screensaver lijkt

### Screensaver

- Vijf of meer volledig verzadigde kleuren
- Kleur gelijkmatig van rand tot rand verspreid
- Snelle, herhalende beweging die je kunt volgen
- Perfect glad, met zichtbare banding in donkere gebieden
- Gecentreerde, symmetrische vlekken

### Aurora goed gedaan

- Twee of drie verwante kleuren op bijna zwart
- Het grootste deel van het beeld donker, licht in één gebied
- Beweging zo langzaam dat je haar pas bij een tweede blik merkt
- Fijne korrel over de donkere gebieden
- Sluiers die leunen en langs één rand wegdrijven

Duisternis is het belangrijkste ingrediënt. Een aurora heeft meer donker dan verlicht gebied nodig, omdat de gloed alleen daartegen leest. Diezelfde duisternis is waar banding het eerst opvalt: lange, subtiele hellingen van donker petrol naar zwart vertonen op de meeste schermen zichtbare trappen. Een fijne korrel lost het op, zoals uitgelegd in [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding) en [donkere kleurverloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds).

## Zo bouw je een aurora-kleurverloop in CSS

De gebruikelijke techniek is een paar radiale kleurverlopen in de vorm van brede, platte ellipsen, samen vervaagd op een te grote laag achter de inhoud. Een pseudo-element blurren kost meer dan een gewoon kleurverloop, dus houd het aantal lagen laag en de animatie langzaam, en stop de beweging voor iedereen die minder beweging verkiest.

```css
.aurora {
  position: relative;
  overflow: hidden;
  background: #030712;
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 30%, #34d399cc, transparent 70%),
    radial-gradient(ellipse 35% 20% at 62% 26%, #22d3eeaa, transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 48%, #8b5cf699, transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

.aurora > * {
  position: relative; /* keep content above the light */
}

@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}
```

Drie vervaagde sluiers op een bijna zwarte ondergrond, die in 30 seconden voorbijdrijven. De negatieve inset verbergt de zachte randen die de blur veroorzaakt.

Voor meer over kleurverlopen soepel animeren, zie [geanimeerde kleurverloopachtergronden](https://gradiently.design/nl/guide/animated-gradient-background). Voor het respecteren van bewegingsvoorkeuren, zie [beperkte beweging](https://gradiently.design/nl/guide/reduced-motion).

## Typografie op een aurora

Aurora-achtergronden zijn gul voor typografie, omdat het grootste deel van het beeld donker is. Zet lichte letters in het donkerste gebied en houd de helderste sluier ver weg van de woorden. De fout is de gloed en de kop samen te centreren, waardoor de letters staan op het ene gebied met het minste contrast.

Een evenementposter waarbij het heldere deel van een aurora-kleurverloop achter de titel zit

Licht en woorden concurreren als de gloed recht achter de kop loopt.

Dezelfde evenementposter met het donkerdere gebied van het kleurverloop achter de titel

Met de donkere ondergrond achter de woorden omlijst de aurora ze juist.

## Waar aurora-kleurverlopen passen

- Merken voor muziek, slaap, meditatie en welzijn, waar rustig licht bij het product past
- Nachtevenementen, planetaria, sterrenkunde en reizen naar noordelijke oorden
- Techlanceringen die sfeer willen zonder neon
- Wallpapers en vergrendelschermen; zie [kleurverloopwallpaper](https://gradiently.design/nl/guide/gradient-wallpaper)
- Looping videoachtergronden, waar langzaam drijven het hele punt is

Het past minder waar mensen veel moeten lezen of cijfers vergelijken. Dashboards, prijstabellen en lange artikelen willen een rustig, gelijkmatig oppervlak, en een drijvende gloed erachter wordt een afleiding. Het botst ook met heldere merken voor overdag: een bakkerij of een kinderspeelgoedwinkel ziet er vreemd uit gehuld in poolnacht. Leen in die gevallen alleen de zachtheid, als één bleke gloed op een lichte ondergrond.

> **Eén aurora per scherm** Een aurora is een sfeer, geen patroon. Gebruik hem één keer, als achtergrond van een hero, een cover of een story, en laat de rest van de pagina rustig. Op elke kaart herhaald voelt het niet meer als licht en gaat het als decoratie aanvoelen.

Omdat een aurora afhangt van langzame beweging, is hij op zijn best als loop in plaats van als stilstaand beeld. In Gradiently exporteren ontwerpen met een Mark die je hebt geclaimd als naadloze loops van 5 tot 30 seconden, met de beweging en het tempo die je kiest.

## FAQ

### Wat is een aurora-kleurverloop?

Een aurora-kleurverloop is een donkere achtergrond met zachte, vervaagde sluiers of plassen van lichtgevende kleur, geïnspireerd door het noorderlicht.

### Welke kleuren zijn het best voor een aurora-kleurverloop?

Groen, petrol en violet op een bijna zwarte ondergrond zien er het natuurlijkst uit, met roze of rood als zeldzaam accent. Houd het bij twee of drie kleuren.

### Hoe maak ik een aurora-kleurverloop in CSS?

Stapel een paar brede, platte `radial-gradient`-ellipsen op een pseudo-element, vervaag het met `filter: blur()`, plaats het over een bijna zwarte achtergrond en animeer het langzaam.

### Waarom heeft mijn aurora-kleurverloop strepen?

Lange, subtiele donkere hellingen vertonen op de meeste schermen banding. Voeg fijne korrel toe over de donkere gebieden en vermijd zware compressie.

### Waar hoort tekst op een aurora-kleurverloop?

In het donkerste gebied, weg van de helderste sluier, zodat lichte letters het meeste contrast hebben.