Sfondi con gradiente animato in CSS, fatti come si deve

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.

Per il lato progettuale, quando il movimento aiuta un brand e come dargli il ritmo, vedi sfondi con gradiente animato. 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.

.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 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 se supporti quelli più vecchi.

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

Anche questa tecnica ridisegna a ogni fotogramma, come la prima. Il suo vantaggio è il controllo: puoi muovere un solo bagliore in un gradiente mesh, far ruotare un bordo conico 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.

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

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.

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

Scegliere una tecnica

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 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 spiega cosa conta come movimento da eliminare.

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