Nordlysgradienter: mykt lys, gjort riktig

En nordlysgradient er en bakgrunn av mykt, lysende farge som svever over et mørkt underlag, som nordlyset: slør av grønt, turkis og fiolett som ser ut til å gløde i stedet for å ligge på overflaten. Teknisk sett er det et sett kraftig uskarpe fargefelt eller bånd på en nesten svart bunn, ofte i svært langsom bevegelse. Det er et av de mest atmosfæriske uttrykkene en gradient kan ha, og et av de enkleste å overdrive.

Hva som gjør en nordlysgradient annerledes

Tre ting skiller et nordlys fra en vanlig mørk gradient. For det første er underlaget veldig mørkt, nær svart, så enhver farge på det leses som lys. For det andre kommer fargen i myke, ujevne slør eller felt i stedet for en glatt overgang fra én side til den andre. For det tredje er kantene ekstremt uskarpe, så ingenting har en form du kan spore. Sammen gir de inntrykk av lys i luft i stedet for maling på en vegg.

Nordlyspaletter som virker

Det ekte nordlyset får fargene sine fra gasser høyt oppe i atmosfæren: oksygen gir det kjente grønne og, høyere opp, en dyp rød, mens nitrogen legger til blått og lilla. Å holde seg nær den familien er grunnen til at noen nordlysgradienter ser naturlige ut og andre ser ut som en nattklubb. Begynn med en grønn eller turkis, legg til en fiolett, og bruk rosa eller rød som en sjelden aksent.

Du kan selvfølgelig gå bort fra naturen. Varme nordlys i rav og korall, eller monokrome i én enkelt blå, fungerer begge, så lenge underlaget forblir mørkt og fargene forblir naboer. For mer om å velge farger som passer sammen, se analoge farger.

Slik hindrer du at et nordlys ser ut som en skjermsparer

Mørket er den viktigste ingrediensen. Et nordlys trenger mer mørkt enn opplyst område, fordi gløden bare leses mot det. Det samme mørket er der bånd vises først: lange, subtile overganger fra mørk turkis til svart får synlige trinn på de fleste skjermer. Fint korn løser det, som forklart i gradientbånd og mørke gradientbakgrunner.

Slik bygger du en nordlysgradient i CSS

Den vanlige teknikken er noen få radiale gradienter formet som brede, flate ellipser, uskarpt blandet på et overdimensjonert lag bak innholdet. Å gjøre et pseudo-element uskarpt koster mer enn en vanlig gradient, så hold antall lag lavt og animasjonen langsom, og stopp bevegelsen for alle som foretrekker redusert bevegelse.

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

For mer om å animere gradienter jevnt, se animerte gradientbakgrunner. For å respektere innstillinger for bevegelse, se redusert bevegelse.

Typografi på et nordlys

Nordlysbakgrunner er sjenerøse mot typografi, fordi det meste av bildet er mørkt. Sett lys skrift i den mørkeste regionen og hold det lyseste sløret godt unna ordene. Feilen er å sentrere gløden og overskriften sammen, slik at bokstavene ligger på det ene området med minst kontrast.

Hvor nordlysgradienter passer

• Musikk-, søvn-, meditasjons- og velværemerkevarer, der rolig lys passer produktet
• Nattarrangementer, planetarier, astronomi og reiser til nordlige steder
• Teknologilanseringer som vil ha atmosfære uten neon
• Bakgrunnsbilder og låseskjermer. Se gradientbakgrunnsbilder
• Loopende videobakgrunner, der langsom drift er hele poenget

Det passer dårligere der folk må lese mye eller sammenligne tall. Dashbord, pristabeller og lange artikler vil ha en stille, jevn flate, og en glød som driver bak dem, blir en distraksjon. Det kolliderer også med lyse dagmerkevarer: et bakeri eller en leketøysbutikk for barn vil se rart ut pakket inn i polarnatt. I de tilfellene låner du bare mykheten, som en enkelt blek glød på et lyst underlag.

Fordi et nordlys avhenger av langsom bevegelse, er det best som en loop og ikke som et stillbilde. I Gradiently eksporteres design laget med en Mark du har sikret deg, som sømløse looper på 5 til 30 sekunder, med bevegelsen og tempoet du velger.