Effet de dégradé au survol en CSS : quatre façons de l’animer

Un effet de dégradé au survol en CSS demande un contournement, car les navigateurs n’animent pas background-image : changez le dégradé dans :hover et il saute. Quatre techniques donnent un résultat fluide. Faire glisser un dégradé surdimensionné avec background-position, animer des arrêts de couleur déclarés avec @property, fondre un second dégradé sur un pseudo-élément, ou déplacer un halo radial avec le curseur. Chacune convient à des éléments différents, et toutes figurent ci-dessous avec leur code.

Pourquoi la transition ne marche pas sur les dégradés

Pour le navigateur, un dégradé est une image. Il sait interpoler un nombre ou une couleur, mais pas une image en une autre : background-image n’est donc pas interpolé, et le nouveau dégradé remplace l’ancien instantanément. Les propriétés personnalisées utilisées dans le dégradé se comportent de la même façon tant que vous ne les déclarez pas, car une propriété non déclarée n’est que du texte.

/* This snaps, with no easing */
.btn {
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
  transition: background-image 400ms ease;
}
.btn:hover {
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
}

Technique 1 : faire glisser un dégradé surdimensionné

Rendez l’arrière-plan plus grand que l’élément, peignez-y les deux états, puis déplacez-le. background-position peut être animé : les nouvelles couleurs glissent donc en place. Cela fonctionne dans tous les navigateurs, sans aucune déclaration.

.btn {
  background-image: linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 500ms ease;
}

.btn:hover {
  background-position: 100% 50%;
}

Le mouvement se lit comme un balayage, ce qui convient aux boutons et aux liens. Il convainc moins sur les grandes cartes, où l’on voit le dégradé voyager. Animer background-position provoque un nouveau rendu, ce qui ne pose pas de problème pour les petits éléments ; pour une grande surface, utilisez la technique 3. Les boutons en dégradé CSS propose d’autres modèles de boutons construits sur ce principe.

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

Déclarez les couleurs des arrêts comme propriétés personnalisées typées et le navigateur pourra les interpoler. Le dégradé change alors de couleur sur place, sans glisser. @property fonctionne dans tous les grands navigateurs actuels ; les plus anciens se contentent de sauter, ce qui est un repli acceptable pour un survol. Les règles de déclaration sont traitées dans @property en CSS.

@property --stop-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #1e1b4b;
}

@property --stop-b {
  syntax: "<color>";
  inherits: false;
  initial-value: #6d28d9;
}

.card {
  background-image: linear-gradient(135deg, var(--stop-a), var(--stop-b));
  transition: --stop-a 450ms ease, --stop-b 450ms ease;
}

.card:hover {
  --stop-a: #6d28d9;
  --stop-b: #f472b6;
}

La même astuce anime l’angle. Déclarez --angle avec syntax: "<angle>", utilisez-le dans linear-gradient(var(--angle), ...) et changez-le au survol : un dégradé qui tourne de 135 à 225 degrés à l’arrivée du pointeur est une touche subtile et soignée pour les cartes et les bordures en dégradé.

Les deux techniques vues jusqu’ici fonctionnent aussi sur le texte en dégradé. Un texte découpé avec background-clip: text montre tout ce que fait l’arrière-plan : un glissement ou une transition d’arrêts sur un titre fait courir la couleur à travers les lettres au survol. Gardez le changement doux sur les titres qu’il faut lire, et assurez-vous que les deux états respectent le contraste avec la page.

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

Placez le dégradé de survol sur un pseudo-élément au-dessus de la base et faites varier son opacité. Les changements d’opacité sont gérés par le compositeur sans nouveau rendu : c’est le choix le plus fluide pour les grandes cartes, les panneaux d’en-tête et tout ce qui figure dans une longue grille.

.tile {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
  opacity: 0;
  transition: opacity 400ms ease;
}

.tile:hover::before {
  opacity: 1;
}

Technique 4 : un halo qui suit le curseur

Un dégradé radial positionné par des propriétés personnalisées peut suivre le pointeur. Définissez --x et --y avec un petit script et la lumière bouge avec la main. Gardez-le doux et loin du texte : il doit évoquer une lumière sur une surface, jamais un halo autour des mots.

.panel {
  background-image:
    radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), rgb(244 114 182 / 0.35), transparent 70%),
    linear-gradient(135deg, #1e1b4b, #312e81);
}

/* JavaScript:
   panel.addEventListener("pointermove", (e) => {
     const r = panel.getBoundingClientRect();
     panel.style.setProperty("--x", `${e.clientX - r.left}px`);
     panel.style.setProperty("--y", `${e.clientY - r.top}px`);
   });
*/

Choisir une technique

Pour des dégradés qui bougent d’eux-mêmes plutôt qu’au survol, voyez les dégradés animés en CSS. Pour une vue d’ensemble de ce qui coûte du temps de rendu, voyez les performances des dégradés CSS.

Écrans tactiles et mouvement réduit

@media (hover: hover) {
  .btn:hover { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

Les effets de survol donnent vie à un site web. Sur les publications sociales, il n’y a pas de pointeur : le mouvement doit vivre dans la création elle-même. Les Marks de Gradiently peuvent porter leur propre mouvement discret, et avec Pro une création s’exporte en MP4, WebM ou GIF là où le navigateur prend en charge l’enregistrement, prête pour une story ou une publication.