# Sfondi con gradiente animato in CSS, fatti come si deve

[Canonical HTML page](https://gradiently.design/it/guide/css-animated-gradient)

I gradienti non si possono animare direttamente, ma tutto ciò che li circonda sì. Quattro tecniche, quanto costa ciascuna al browser e come mantenere il movimento calmo e facoltativo.

## The short version

- I browser non sanno interpolare tra due valori di gradiente, quindi un gradiente animato in CSS sposta, sfuma o trasforma il gradiente invece di animarlo direttamente.
- La tecnica classica rende lo sfondo più grande dell’elemento e anima background-position, funziona ovunque ma ridisegna a ogni fotogramma.
- Registrare le proprietà personalizzate con @property permette al browser di animare singoli colori, angoli e posizioni dentro un gradiente.
- Animare transform o opacity su un livello di gradiente separato è di solito l’opzione più economica, perché i browser spesso riescono a comporlo senza ridisegnare.
- Ogni animazione di gradiente dovrebbe fermarsi, o quasi, quando l’utente ha chiesto un movimento ridotto.

Un **gradiente animato in CSS** è uno sfondo a gradiente che cambia colore o posizione nel tempo. C’è un problema: se scrivi due gradienti diversi in una regola `@keyframes`, i browser non li sfumano, saltano. Per questo ogni tecnica che funziona anima qualcosa accanto al gradiente: la sua posizione, le proprietà personalizzate al suo interno o il livello su cui è dipinto. Quale scegli decide quanto risulta fluido e quanto lavoro fa il browser a ogni fotogramma.

- Fotogramma 1: crepuscolo: `linear-gradient(120deg, #1e1b4b, #7c3aed 45%, #f472b6)`
- Fotogramma 2: più tardi: `linear-gradient(160deg, #1e1b4b, #6d28d9 35%, #fb7185)`
- Fotogramma 3: brace: `linear-gradient(200deg, #1e1b4b, #4c1d95 30%, #fb923c)`

Tre momenti di un’unica animazione lenta. Direzione e colore si muovono entrambi, ma la palette resta di una sola famiglia.

Per il lato progettuale, quando il movimento aiuta un brand e come dargli il ritmo, vedi [sfondi con gradiente animato](https://gradiently.design/it/guide/animated-gradient-background). Questa guida è il codice.

## Tecnica 1: sposta uno sfondo sovradimensionato

Rendi il gradiente da due a quattro volte più grande dell’elemento con `background-size`, poi anima `background-position` in modo che nel tempo ne compaia una parte diversa. Funziona in ogni browser e non richiede JavaScript. Usa `alternate` così il movimento si inverte con dolcezza invece di saltare all’inizio.

```css
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6, #fb923c);
  background-size: 300% 300%;
  animation: pan 18s ease-in-out infinite alternate;
}

@keyframes pan {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
```

Il classico gradiente animato. Durate lente, da 12 a 30 secondi, sembrano ambientali e non frenetiche.

Il costo: `background-position` non è qualcosa che i browser possono muovere solo con la scheda grafica, quindi l’elemento viene ridisegnato a ogni fotogramma. Su un pulsante non è niente. Su un hero a schermo intero è un lavoro vero che continua finché la pagina è aperta.

## Tecnica 2: anima i punti di colore con @property

Le proprietà personalizzate sono normalmente stringhe, che non si possono interpolare. Registrarne una con `@property` le dà un tipo, come `<color>`, `<angle>` o `<percentage>`, e le proprietà tipizzate si animano con fluidità. Usale dentro il gradiente e potrai animare direttamente i colori, l’angolo o la posizione di un punto. `@property` è supportato in tutti i principali browser attuali; controlla [caniuse](https://caniuse.com/mdn-css_at-rules_property) se supporti quelli più vecchi.

```css
@property --from {
  syntax: "<color>";
  inherits: false;
  initial-value: #7c3aed;
}
@property --to {
  syntax: "<color>";
  inherits: false;
  initial-value: #f472b6;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 120deg;
}

.hero {
  background: linear-gradient(var(--angle), var(--from), var(--to));
  animation: shift 16s ease-in-out infinite alternate;
}

@keyframes shift {
  to {
    --from: #0891b2;
    --to: #fb923c;
    --angle: 200deg;
  }
}
```

Colori e angolo che si animano dentro il gradiente. Le proprietà non registrate salterebbero invece di sfumare.

- Inizio: da viola a rosa: `linear-gradient(120deg, #7c3aed, #f472b6)`
- Fine: da ciano ad arancione: `linear-gradient(200deg, #0891b2, #fb923c)`

I due estremi dell’animazione qui sopra. Il browser sfuma ogni fotogramma intermedio.

Anche questa tecnica ridisegna a ogni fotogramma, come la prima. Il suo vantaggio è il controllo: puoi muovere un solo bagliore in un [gradiente mesh](https://gradiently.design/it/guide/css-mesh-gradient), far ruotare un [bordo conico](https://gradiently.design/it/guide/css-gradient-border) o spostare un gradiente del brand verso una seconda palette senza sfondi sovradimensionati.

## Tecnica 3: trasforma un livello di gradiente

Metti il gradiente su uno pseudo-elemento molto più grande dell’elemento e anima il suo `transform`, ad esempio una lenta rotazione o deriva. I browser di solito riescono a muovere un livello trasformato con la scheda grafica senza ridisegnarlo, quindi è il modo più economico di animare un grande gradiente. `will-change: transform` suggerisce di preparare il livello in anticipo.

```css
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #0891b2, #1e1b4b);
  animation: turn 40s linear infinite;
  will-change: transform;
}

@keyframes turn {
  to { transform: rotate(1turn); }
}
```

Un enorme gradiente conico che gira lentamente dietro il contenuto. L’inset negativo mantiene coperti gli angoli mentre ruota.

## Tecnica 4: dissolvenza tra due gradienti

Sovrapponi due livelli di gradiente e anima l’`opacity` di quello in alto. Anche l’opacità è una proprietà adatta al compositore, quindi la dissolvenza è fluida ed economica. Si adatta a lenti cambi di atmosfera, come una palette diurna che sfuma in una notturna, e permette ai due gradienti di essere del tutto diversi nella struttura.

```css
.sky {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #7dd3fc, #fde68a);
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #0f172a, #7c3aed);
  animation: dusk 20s ease-in-out infinite alternate;
}

@keyframes dusk {
  from { opacity: 0; }
  to   { opacity: 1; }
}
```

Il giorno sfuma nella notte e ritorna. Cambia solo l’opacità, quindi niente viene ridisegnato.

## Scegliere una tecnica

| Tecnica | Lavoro del browser per fotogramma | Ideale per |
| --- | --- | --- |
| Spostare `background-position` | Ridisegno | Piccoli elementi, pulsanti, testo |
| Colori e angoli con `@property` | Ridisegno | Cambi di colore precisi, bordi rotanti |
| `transform` su un livello | Di solito solo composizione | Grandi sfondi a schermo intero |
| Dissolvenza con `opacity` | Di solito solo composizione | Lenti cambi di atmosfera o palette |

I ridisegni vanno bene su aree piccole. Per le aree grandi, preferisci transform e opacity.

Misura invece di tirare a indovinare. Negli strumenti per sviluppatori di Chrome, l’evidenziazione del disegno nel pannello Rendering mostra le aree ridisegnate a ogni fotogramma, e una registrazione Performance mostra quanta parte di ogni fotogramma va al disegno. [Prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance) lo illustra passo per passo.

## Movimento ridotto e buone maniere

Ad alcune persone lo sfondo in movimento dà vertigini o distrae, e i sistemi operativi permettono di chiederne meno. Rispettalo con una query `prefers-reduced-motion` che ferma l’animazione, lasciando un fotogramma fermo e completo. La guida al [movimento ridotto](https://gradiently.design/it/guide/reduced-motion) spiega cosa conta come movimento da eliminare.

```css
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero::before,
  .sky::after {
    animation: none;
  }
}
```

Una regola che ferma tutte le tecniche qui sopra. Controlla che il fotogramma rimasto abbia ancora un bell’aspetto.

### Da evitare

- Cicli più veloci di circa 8 secondi su aree grandi
- Rotazione arcobaleno della tonalità su tutta la pagina
- Movimento dietro il testo che le persone devono leggere
- Animazioni che continuano a girare quando la scheda resta inattiva per minuti

### Da fare

- Movimento lento e ambientale dentro una sola famiglia di colori
- Movimento nell’hero, quiete nel contenuto
- Un fotogramma fermo e calmo per il movimento ridotto
- Provare su un portatile e un telefono modesti, non solo su un desktop veloce

## FAQ

### Si può animare un gradiente CSS?

Non direttamente: i browser saltano tra due valori di gradiente nei keyframe. Anima invece `background-position`, le proprietà personalizzate registrate usate dentro il gradiente, oppure transform e opacity di un livello di gradiente.

### Qual è il modo più fluido per animare uno sfondo a gradiente?

Animare `transform` o `opacity` su un livello di gradiente separato, perché i browser di solito le gestiscono senza ridisegnare.

### Come animo i colori di un gradiente in CSS?

Registra ogni colore con `@property` usando `syntax: "<color>"`, usa le proprietà nel gradiente e modificale in `@keyframes`.

### I gradienti animati rallentano una pagina?

Quelli piccoli raramente contano. I grandi sfondi animati che ridisegnano a ogni fotogramma possono costare batteria e fluidità, quindi preferisci transform o opacity e misura con gli strumenti per sviluppatori.

### Come rispetto il movimento ridotto nelle animazioni di gradiente?

Racchiudi una regola `animation: none` in `@media (prefers-reduced-motion: reduce)` così chi chiede meno movimento vede un fotogramma fermo.