Gradienti aurora: luce soffusa, fatta bene

Un gradiente aurora è uno sfondo di colore morbido e luminoso che fluttua su un fondo scuro, come l’aurora boreale: veli di verde, verde acqua e viola che sembrano brillare invece di stare sulla superficie. Tecnicamente è un insieme di macchie o bande di colore molto sfocate su una base quasi nera, spesso in movimento molto lento. È uno degli aspetti più suggestivi che un gradiente possa avere, e uno dei più facili da esagerare.

Cosa rende diverso un gradiente aurora

Tre cose separano un’aurora da un normale gradiente scuro. Primo, il fondo è molto scuro, vicino al nero, così ogni colore che ci sta sopra si legge come luce. Secondo, il colore arriva in veli o macchie morbidi e irregolari, e non in una rampa uniforme da un lato all’altro. Terzo, i bordi sono estremamente sfocati, quindi niente ha una forma che si possa seguire con lo sguardo. Insieme creano l’impressione di luce nell’aria e non di vernice su un muro.

Palette aurora che funzionano

L’aurora vera prende i suoi colori dai gas dell’alta atmosfera: l’ossigeno dà il familiare verde e, più in alto, un rosso profondo, mentre l’azoto aggiunge blu e viola. Restare vicino a quella famiglia è il motivo per cui alcuni gradienti aurora sembrano naturali e altri sembrano una discoteca. Parti da un verde o da un verde acqua, aggiungi un viola e usa il rosa o il rosso come rarissimo accento.

Certo, puoi allontanarti dalla natura. Aurore calde in ambra e corallo, o monocromatiche in un solo blu, funzionano entrambe, purché il fondo resti scuro e i colori restino vicini. Per saperne di più su come scegliere colori che stanno bene insieme, vedi colori analoghi.

Come evitare che un’aurora sembri uno screensaver

Il buio è l’ingrediente più importante. Un’aurora ha bisogno di più area scura che illuminata, perché il bagliore si legge solo contro di essa. Ed è proprio nel buio che il banding si vede per primo: le rampe lunghe e sottili da verde acqua scuro a nero mostrano gradini visibili sulla maggior parte degli schermi. Una grana fine lo risolve, come spiegato in banding nei gradienti e sfondi a gradiente scuri.

Come costruire un gradiente aurora in CSS

La tecnica abituale è usare qualche gradiente radiale a forma di ellisse larga e piatta, sfocato insieme su un livello sovradimensionato dietro il contenuto. Sfocare uno pseudo-elemento costa più di un semplice gradiente, quindi tieni basso il numero di livelli e lenta l’animazione, e ferma il movimento per chi preferisce meno movimento.

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

Per saperne di più su come animare i gradienti in modo fluido, vedi sfondi a gradiente animati. Per rispettare le preferenze di movimento, vedi movimento ridotto.

Il testo su un’aurora

Gli sfondi aurora sono generosi con il testo, perché gran parte del fotogramma è scura. Componi il testo chiaro nella zona più scura e tieni il velo più luminoso ben lontano dalle parole. L’errore è centrare insieme il bagliore e il titolo, così le lettere finiscono nell’unica zona con meno contrasto.

Dove stanno bene i gradienti aurora

• Brand di musica, sonno, meditazione e benessere, dove una luce calma si addice al prodotto
• Eventi notturni, planetari, astronomia e viaggi verso il nord
• Lanci tecnologici che vogliono atmosfera senza neon
• Sfondi e schermate di blocco; vedi sfondi a gradiente
• Sfondi video in loop, dove il lento scivolare è tutto il punto

Sta meno bene dove le persone devono leggere molto o confrontare numeri. Dashboard, tabelle dei prezzi e articoli lunghi vogliono una superficie quieta e uniforme, e un bagliore in movimento dietro diventa una distrazione. Stona anche con i brand luminosi e diurni: una pasticceria o un negozio di giocattoli sembreranno strani avvolti nella notte polare. In quei casi, prendi in prestito solo la morbidezza, come un unico bagliore pallido su un fondo chiaro.

Poiché un’aurora dipende dal movimento lento, dà il meglio come loop e non come immagine ferma. In Gradiently, i design realizzati con un Mark che hai riservato si esportano come loop senza giunture da 5 a 30 secondi, con il movimento e il ritmo che scegli tu.