Aurora-kleurverlopen: zacht licht, goed gedaan

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.

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.

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.

Zo voorkom je dat een aurora op een screensaver lijkt

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 en donkere kleurverloopachtergronden.

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.

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

Voor meer over kleurverlopen soepel animeren, zie geanimeerde kleurverloopachtergronden. Voor het respecteren van bewegingsvoorkeuren, zie beperkte beweging.

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.

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

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.