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

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

Écrivez un nouveau dégradé dans :hover et il saute au lieu de glisser. Les navigateurs ne savent pas transformer un dégradé en un autre, mais ils savent le déplacer, le fondre ou animer ses couleurs. Voici chaque méthode, avec le code.

## The short version

- Un effet de dégradé au survol en CSS ne s’obtient pas par une transition sur background-image, car les navigateurs remplacent les dégradés instantanément au lieu de les interpoler.
- La technique la plus compatible est un dégradé surdimensionné avec une transition sur background-position, qui fait glisser les nouvelles couleurs dans le cadre.
- Déclarer les arrêts de couleur ou les angles avec @property permet au navigateur de les animer en douceur, et fonctionne dans tous les grands navigateurs actuels.
- Fondre l’opacité d’un second dégradé sur un pseudo-élément est la technique la moins coûteuse à rendre, car les changements d’opacité ne provoquent pas de nouveau rendu.
- Les effets de survol doivent se placer dans une media query hover et respecter prefers-reduced-motion.

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.

```css
/* 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);
}
```

La ligne de transition est ignorée pour les dégradés. Toutes les techniques ci-dessous contournent ce problème.

- État au repos: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`
- État au survol: `linear-gradient(135deg, #6d28d9 0%, #f472b6 100%)`

Les deux états utilisés dans les exemples. L’objectif : un passage fluide de la pastille de gauche à celle de droite.

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

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

Au repos, vous voyez la moitié gauche, de l’indigo au violet. Au survol, la moitié droite, du violet au rose, glisse en place.

La bande complète à 200 %: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`

Voici l’arrière-plan entier. Le bouton n’en montre jamais que la moitié à la fois.

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](https://gradiently.design/fr/guide/css-gradient-button) 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](https://gradiently.design/fr/guide/css-property-animation).

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

Chaque arrêt s’anime indépendamment. Donnez-leur des durées différentes et la couleur semble couler d’un coin à l’autre.

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é](https://gradiently.design/fr/guide/css-gradient-border).

Les deux techniques vues jusqu’ici fonctionnent aussi sur [le texte en dégradé](https://gradiently.design/fr/guide/css-gradient-text). 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.

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

`z-index: -1` avec `isolation: isolate` garde le pseudo-élément derrière le texte de la tuile mais au-dessus de son dégradé de base.

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

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

Le halo est un calque supérieur sur une base sombre. Mettre à jour deux propriétés personnalisées coûte peu, mais chaque mouvement provoque un nouveau rendu : réservez-le à quelques panneaux, pas à toutes les cartes d’une page.

## Choisir une technique

| Technique | Rendu visuel | Coût de rendu | Idéale pour |
| --- | --- | --- | --- |
| Glissement avec background-position | Un balayage de nouvelle couleur | Nouveau rendu pendant la transition | Boutons, liens, étiquettes |
| Arrêts de couleur avec @property | Des couleurs qui changent sur place | Nouveau rendu pendant la transition | Cartes, badges, bordures |
| Fondu enchaîné d’opacité | Un dégradé qui se dissout dans un autre | Composé, sans nouveau rendu | Grands panneaux, longues grilles |
| Halo suivant le curseur | Une lumière qui suit le pointeur | Nouveau rendu à chaque mouvement | Quelques panneaux mis en avant |

Dans le doute, optez pour le fondu enchaîné. C’est le moins coûteux et il fonctionne partout.

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](https://gradiently.design/fr/guide/css-animated-gradient). Pour une vue d’ensemble de ce qui coûte du temps de rendu, voyez [les performances des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance).

## Écrans tactiles et mouvement réduit

### À éviter

- Des styles de survol qui restent collés après un toucher sur téléphone
- Une information qui n’apparaît qu’au survol
- De longues animations de survol en boucle
- Ignorer le réglage de mouvement réduit

### À faire

- Placer les règles de survol dans `@media (hover: hover)`
- Afficher le même état sur `:active` pour le tactile
- Garder les transitions entre 200 et 500 ms
- Supprimer le mouvement sous `prefers-reduced-motion`, garder le changement de couleur

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

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

La couleur change toujours pour tout le monde ; seul le mouvement est retiré pour les personnes qui en ont demandé moins.

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.

## FAQ

### Peut-on faire une transition de dégradé CSS au survol ?

Pas directement. `background-image` change instantanément. Animez `background-position` sur un dégradé surdimensionné, animez des arrêts déclarés avec `@property`, ou fondez l’opacité d’un second dégradé.

### Comment faire changer de couleur un bouton en dégradé en douceur au survol ?

Utilisez `background-size: 200% 100%` avec un dégradé à trois arrêts, puis animez `background-position` de `0% 50%` à `100% 50%` au survol.

### @property fonctionne-t-il dans tous les navigateurs ?

Il fonctionne dans les versions actuelles de Chrome, Edge, Safari et Firefox. Les anciens navigateurs sautent d’un état à l’autre au lieu de les enchaîner en douceur.

### Quel est l’effet de dégradé au survol le plus performant ?

Un fondu enchaîné d’opacité : le dégradé de survol se trouve sur un pseudo-élément et seule son opacité change, ce qui évite un nouveau rendu.

### Les effets de dégradé au survol doivent-ils respecter le mouvement réduit ?

Oui. Sous `prefers-reduced-motion: reduce`, retirez le mouvement et gardez un simple changement de couleur.