Fonds dégradés animés en CSS, dans les règles de l’art

Un dégradé animé en CSS est un arrière-plan dégradé qui change de couleur ou de position au fil du temps. Il y a un piège : si vous écrivez deux dégradés différents dans une règle @keyframes, les navigateurs ne les mélangent pas, ils sautent. Toute technique qui marche anime donc autre chose à côté du dégradé : sa position, les propriétés personnalisées qu’il contient ou le calque sur lequel il est peint. Ce choix décide de la fluidité du rendu et du travail que le navigateur fait à chaque image.

Côté design, pour savoir quand le mouvement aide une marque et comment le rythmer, voyez les arrière-plans dégradés animés. Ce guide, c’est le code.

Technique 1 : déplacer un arrière-plan surdimensionné

Donnez au dégradé deux à quatre fois la taille de l’élément avec background-size, puis animez background-position pour qu’une autre partie apparaisse avec le temps. Cela marche dans tous les navigateurs et n’exige aucun JavaScript. Utilisez alternate pour que le mouvement s’inverse en douceur au lieu de sauter au début.

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

Le coût : background-position n’est pas quelque chose que les navigateurs peuvent déplacer avec la seule carte graphique : l’élément est donc redessiné à chaque image. Sur un bouton, ce n’est rien. Sur un hero plein écran, c’est un vrai travail qui tourne tant que la page est ouverte.

Technique 2 : animer les arrêts de couleur avec @property

Les propriétés personnalisées sont normalement des chaînes, qu’on ne peut pas interpoler. En enregistrer une avec @property lui donne un type, comme <color>, <angle> ou <percentage>, et les propriétés typées s’animent en douceur. Utilisez-les dans le dégradé et vous pouvez animer directement les couleurs, l’angle ou la position d’un arrêt. @property est pris en charge par tous les grands navigateurs actuels ; consultez caniuse si vous gérez des navigateurs plus anciens.

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

Cette technique redessine aussi à chaque image, comme la première. Son avantage est le contrôle : vous pouvez déplacer une lueur dans un dégradé maillé, faire tourner une bordure conique ou décaler un dégradé de marque vers une seconde palette sans arrière-plans surdimensionnés.

Technique 3 : transformer un calque de dégradé

Placez le dégradé sur un pseudo-élément bien plus grand que l’élément, et animez sa transform, par exemple une lente rotation ou une dérive. Les navigateurs peuvent généralement déplacer un calque transformé sur la carte graphique sans le redessiner : c’est la façon la moins coûteuse d’animer un grand dégradé. will-change: transform indique que le calque doit être promu à l’avance.

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

Technique 4 : fondu enchaîné entre deux dégradés

Superposez deux calques de dégradé et animez l’opacity de celui du dessus. L’opacité est aussi une propriété adaptée au compositeur : le fondu est fluide et peu coûteux. Il convient aux changements lents d’ambiance, comme une palette de jour qui se fond dans une palette de nuit, et il permet aux deux dégradés d’avoir des structures totalement différentes.

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

Choisir une technique

Mesurez plutôt que deviner. Dans les DevTools de Chrome, le panneau Rendering met en évidence par un clignotement les zones redessinées à chaque image, et un enregistrement Performance montre la part de chaque image consacrée au dessin. La performance des dégradés CSS le détaille.

Mouvement réduit et bonnes manières

Certaines personnes ont des vertiges ou se laissent distraire par un mouvement d’arrière-plan, et les systèmes d’exploitation leur permettent d’en demander moins. Respectez cela avec une requête prefers-reduced-motion qui arrête l’animation en laissant une image fixe et complète. Le guide du mouvement réduit explique quel mouvement mérite d’être supprimé.

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