Aurora-gradienter: mjukt norrskensljus, gjort rätt

En aurora-gradient är en bakgrund av mjuk, lysande färg som svävar över mörk botten, som norrskenet: slöjor av grönt, turkost och violett som verkar glöda i stället för att ligga på ytan. Tekniskt är det en uppsättning kraftigt suddade färgfläckar eller band på en nästan svart grund, ofta i mycket långsam rörelse. Det är ett av de mest stämningsfulla uttryck en gradient kan ha, och ett av de lättaste att överdriva.

Vad som gör en aurora-gradient annorlunda

Tre saker skiljer en aurora från en vanlig mörk gradient. För det första är botten väldigt mörk, nära svart, så all färg på den läses som ljus. För det andra kommer färgen i mjuka, ojämna slöjor eller fläckar i stället för en slät övergång från ena sidan till den andra. För det tredje är kanterna extremt suddiga, så inget har en form du kan följa. Tillsammans ger de intrycket av ljus i luften snarare än färg på en vägg.

Aurora-paletter som fungerar

Det riktiga norrskenet får sina färger av gaser högt uppe i atmosfären: syre ger det välkända gröna och, högre upp, ett djupt rött, medan kväve tillför blått och lila. Att hålla sig nära den familjen är skälet till att vissa aurora-gradienter ser naturliga ut och andra ser ut som en nattklubb. Börja med grönt eller turkost, lägg till en violett och använd rosa eller rött som en sällsynt accentfärg.

Du kan förstås röra dig bort från naturen. Varma aurorer i bärnsten och korall, eller enfärgade i ett enda blått, fungerar båda, så länge botten är mörk och färgerna är grannar. Mer om att välja färger som hör ihop finns i analoga färger.

Så undviker du att en aurora ser ut som en skärmsläckare

Mörker är den viktigaste ingrediensen. En aurora behöver mer mörk yta än upplyst, eftersom glöden bara syns mot den. Samma mörker är också där banding syns först: långa, diskreta övergångar från mörkt turkost till svart får synliga steg på de flesta skärmar. Ett fint korn löser det, som förklaras i gradient-banding och mörka gradientbakgrunder.

Så bygger du en aurora-gradient i CSS

Det vanliga tillvägagångssättet är några radiella gradienter formade som breda, platta ellipser, suddade tillsammans på ett överdimensionerat lager bakom innehållet. Att sudda ett pseudoelement kostar mer än en vanlig gradient, så håll antalet lager lågt och animationen långsam, och stoppa rörelsen för den som föredrar minskad rörelse.

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

Mer om att animera gradienter mjukt finns i animerade gradientbakgrunder. Om hur du respekterar rörelseinställningar, se minskad rörelse.

Text på en aurora

Aurorabakgrunder är generösa mot typografi, eftersom det mesta av bilden är mörkt. Sätt ljus text i det mörkaste området och håll den ljusaste slöjan långt från orden. Misstaget är att centrera glöden och rubriken tillsammans, så att bokstäverna hamnar på det enda område som har minst kontrast.

Var aurora-gradienter passar

• Varumärken inom musik, sömn, meditation och välmående, där lugnt ljus passar produkten
• Nattevent, planetarier, astronomi och resor till nordliga platser
• Tekniklanseringar som vill ha stämning utan neon
• Bakgrundsbilder och låsskärmar, se gradient som bakgrundsbild
• Loopande videobakgrunder, där den långsamma driften är hela poängen

Den passar sämre där folk behöver läsa mycket eller jämföra siffror. Instrumentpaneler, pristabeller och långa artiklar vill ha en lugn, jämn yta, och en drivande glöd bakom dem blir en störning. Den krockar också med ljusa dagvarumärken: ett bageri eller en leksaksbutik ser konstiga ut invirade i polarnatt. Låna i de fallen bara mjukheten, som en enda blek glöd på ljus botten.

Eftersom en aurora bygger på långsam rörelse gör den sig bäst som loop snarare än stillbild. I Gradiently exporteras design gjorda med en Mark som du har säkrat som sömlösa loopar på 5 till 30 sekunder, med den rörelse och det tempo du väljer.