# Gradienti aurora: luce soffusa, fatta bene

[Canonical HTML page](https://gradiently.design/it/guide/aurora-gradients)

I gradienti aurora prendono in prestito l’aspetto dell’aurora boreale: veli luminosi di colore che scivolano sul buio. Sono bellissimi e scivolano in fretta nel territorio dello screensaver. Ecco come restare dalla parte giusta.

## The short version

- Un gradiente aurora è uno sfondo scuro con morbide macchie o veli di colore luminoso, molto sfocati, ispirati all’aurora boreale.
- I gradienti aurora funzionano perché i colori chiari su un fondo quasi nero sembrano brillare, come fa la luce vera di notte.
- Le palette aurora più convincenti restano vicine ai colori dell’aurora reale: verdi, verde acqua, viola e un tocco di rosa.
- Un gradiente aurora sembra uno screensaver quando usa troppi colori saturi, si muove troppo in fretta o riempie tutto il fotogramma in modo uniforme.
- Il testo su un’aurora va nella zona più scura, tenendo il velo più luminoso lontano dalle parole.

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.

- Verde boreale: `radial-gradient(ellipse 80% 38% at 50% 32%, #6ee7b7 0%, #10b981 22%, #064e3b 48%, #020617 80%)`
- Velo viola: `radial-gradient(ellipse 75% 40% at 40% 30%, #c4b5fd 0%, #7c3aed 25%, #2e1065 52%, #05030f 82%)`
- Verde acqua artico: `radial-gradient(ellipse 85% 35% at 60% 28%, #67e8f9 0%, #0891b2 25%, #083344 50%, #020617 80%)`
- Crepuscolo rosa: `radial-gradient(ellipse 80% 38% at 45% 30%, #fda4af 0%, #e11d48 22%, #4c0519 50%, #0a0206 80%)`

Bozzetti di aurora a un solo livello: un’ellisse larga e piatta di luce in alto nel fotogramma, che svanisce in un quasi nero. I campi aurora veri ne sovrappongono diversi.

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

- Notte polare: #030712
- Abete profondo: #064e3b
- Verde aurora: #34d399
- Verde acqua glaciale: #22d3ee
- Viola d’alta quota: #8b5cf6
- Rosa raro: #fb7185

Una palette aurora tratta dall’originale. Verde e verde acqua portano il campo, il viola aggiunge profondità, il rosa compare solo su un bordo.

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](https://gradiently.design/it/guide/analogous-colors).

## Come evitare che un’aurora sembri uno screensaver

### Screensaver

- Cinque o più colori completamente saturi
- Colore steso in modo uniforme da un bordo all’altro
- Movimento veloce e ciclico che puoi seguire
- Zone scure perfettamente lisce, con bande visibili
- Macchie centrate e simmetriche

### Aurora fatta bene

- Due o tre colori affini su un fondo quasi nero
- Gran parte del fotogramma lasciata scura, luce in una sola zona
- Movimento così lento che lo noti solo al secondo sguardo
- Grana fine sulle zone scure
- Veli che si inclinano e scivolano fuori da un bordo

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](https://gradiently.design/it/guide/gradient-banding) e [sfondi a gradiente scuri](https://gradiently.design/it/guide/dark-gradient-backgrounds).

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

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

Tre veli sfocati su un fondo quasi nero, che scivolano nell’arco di 30 secondi. L’inset negativo nasconde i bordi morbidi creati dalla sfocatura.

Per saperne di più su come animare i gradienti in modo fluido, vedi [sfondi a gradiente animati](https://gradiently.design/it/guide/animated-gradient-background). Per rispettare le preferenze di movimento, vedi [movimento ridotto](https://gradiently.design/it/guide/reduced-motion).

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

Un manifesto per un evento in cui la parte luminosa di un gradiente aurora sta dietro il titolo

Luce e parole competono quando il bagliore passa proprio dietro il titolo.

Lo stesso manifesto con la zona più scura del gradiente dietro il titolo

Con il fondo scuro dietro le parole, l’aurora le incornicia invece di contrastarle.

## 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](https://gradiently.design/it/guide/gradient-wallpaper)
- 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.

> **Un’aurora per schermata** Un’aurora è un mood, non un motivo ripetuto. Usala una volta, come sfondo di un hero, di una copertina o di una Story, e lascia calmo il resto della pagina. Ripetuta su ogni card, smette di sembrare luce e comincia a sembrare decorazione.

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.

## FAQ

### Cos’è un gradiente aurora?

Un gradiente aurora è uno sfondo scuro con morbidi veli o macchie sfocate di colore luminoso, ispirato all’aurora boreale.

### Quali colori sono i migliori per un gradiente aurora?

Verdi, verde acqua e viola su un fondo quasi nero sembrano i più naturali, con rosa o rosso come raro accento. Limitati a due o tre colori.

### Come faccio un gradiente aurora in CSS?

Sovrapponi qualche ellisse `radial-gradient` larga e piatta su uno pseudo-elemento, sfocalo con `filter: blur()`, mettilo sopra uno sfondo quasi nero e animalo lentamente.

### Perché il mio gradiente aurora ha delle strisce?

Le rampe scure lunghe e sottili mostrano il banding sulla maggior parte degli schermi. Aggiungi una grana fine sulle zone scure ed evita compressioni pesanti.

### Dove va il testo su un gradiente aurora?

Nella zona più scura, lontano dal velo più luminoso, così il testo chiaro ha il massimo contrasto.