Aurora-gradienter: blødt lys, gjort ordentligt

En aurora-gradient er en baggrund med blød, lysende farve, der svæver over en mørk grund, som nordlyset: slør af grøn, turkis og violet, der ser ud til at gløde frem for at ligge på overfladen. Teknisk er den et sæt kraftigt slørede farvepletter eller bånd på en næsten sort bund, ofte i meget langsom bevægelse. Det er et af de mest stemningsfulde udtryk, en gradient kan have, og et af de letteste at overdrive.

Hvad der gør en aurora-gradient anderledes

Tre ting adskiller en aurora fra en almindelig mørk gradient. For det første er grunden meget mørk, tæt på sort, så al farve på den læses som lys. For det andet kommer farven som bløde, ujævne slør eller pletter frem for en glat overgang fra den ene side til den anden. For det tredje er kanterne ekstremt slørede, så intet har en form, du kan følge med øjnene. Sammen skaber de indtrykket af lys i luften frem for maling på en væg.

Aurora-paletter, der virker

Det virkelige nordlys får sine farver fra gasser højt i atmosfæren: ilt giver den velkendte grønne farve og højere oppe en dyb rød, mens kvælstof tilføjer blå og lilla toner. At holde sig i nærheden af den familie er grunden til, at nogle aurora-gradienter ser naturlige ud, og andre ligner en natklub. Start med en grøn eller turkis, tilføj en violet, og brug rosa eller rød som en sjælden accent.

Du kan selvfølgelig bevæge dig væk fra naturen. Varme auroraer i rav og koral, eller monokrome i én enkelt blå, virker begge, så længe grunden forbliver mørk, og farverne forbliver naboer. Mere om at vælge farver, der passer sammen, finder du i analoge farver.

Sådan undgår du, at en aurora ligner en pauseskærm

Mørke er den vigtigste ingrediens. En aurora skal have mere mørkt end oplyst areal, fordi gløden kun kan læses op mod det. Netop i mørket viser banding sig først: lange, svage overgange fra mørk turkis til sort træder synligt frem på de fleste skærme. Et fint korn løser det, som det forklares i banding i gradienter og mørke gradientbaggrunde.

Sådan bygger du en aurora-gradient i CSS

Den sædvanlige teknik er nogle få radiale gradienter formet som brede, flade ellipser, der sløres sammen på et overdimensioneret lag bag indholdet. At sløre et pseudo-element koster mere end en almindelig gradient, så hold antallet af lag lavt og animationen langsom, og stop bevægelsen for alle, der foretrækker reduceret bevægelse.

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

Mere om at animere gradienter jævnt finder du i animerede gradientbaggrunde. Om at respektere indstillinger for bevægelse, se reduceret bevægelse.

Tekst på en aurora

Aurora-baggrunde er venlige mod tekst, fordi det meste af billedet er mørkt. Sæt lys tekst i det mørkeste område, og hold det skarpeste slør langt væk fra ordene. Fejlen er at centrere gløden og overskriften samme sted, så bogstaverne havner på det eneste område med mindst kontrast.

Hvor aurora-gradienter passer ind

• Brands inden for musik, søvn, meditation og velvære, hvor roligt lys passer til produktet
• Natarrangementer, planetarier, astronomi og rejser til nordlige egne
• Teknologilanceringer, der vil have atmosfære uden neon
• Baggrundsbilleder og låseskærme; se gradient som baggrundsbillede
• Loopende videobaggrunde, hvor den langsomme drift er hele pointen

Den passer dårligere, hvor folk skal læse meget eller sammenligne tal. Dashboards, pristabeller og lange artikler kræver en rolig, jævn flade, og en drivende glød bag dem bliver en distraktion. Den kolliderer også med lyse dagbrands: et bageri eller en legetøjsbutik ser mærkelig ud pakket ind i polarnat. I de tilfælde kan du nøjes med at låne blødheden, som en enkelt bleg glød på lys grund.

Fordi en aurora afhænger af langsom bevægelse, er den bedst som et loop frem for et stillbillede. I Gradiently eksporteres designs lavet med en Mark, du har sikret dig, som sømløse loops på 5 til 30 sekunder med den bevægelse og det tempo, du vælger.