Dégradé CSS en CSS : linear-gradient(), radial-gradient() et le piège du SVG

Chercher comment faire un dégradé en CSS mène parfois vers une documentation qui parle d'un <linearGradient> entre balises <defs>. Ce n'est pas une erreur de recherche : c'est un tout autre mécanisme, propre au SVG, qui n'a presque rien en commun avec le dégradé CSS malgré un nom quasi identique.

Le dégradé abordé ici est une fonction CSS, pas une balise. Il se déclare en une ligne et fonctionne sur n'importe quel élément HTML.

Définition

linear-gradient() et radial-gradient() sont des fonctions qui produisent une image générée par le navigateur, sans aucun fichier à charger. Elles s'utilisent comme valeur de background-image, exactement au même endroit qu'un url() : il n'existe pas de propriété dédiée aux dégradés, ce sont des valeurs comme les autres. Une troisième fonction, conic-gradient(), fait tourner les couleurs autour d'un point plutôt que de les faire progresser en ligne ou en cercle, ce qui la rend utile pour des indicateurs de progression circulaires.

.bandeau {
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
}

.bulle {
  background-image: radial-gradient(circle, #fde68a, #f59e0b);
}

Les points d'arrêt de couleur

Un dégradé accepte autant de couleurs que nécessaire, chacune pouvant recevoir une position explicite en pourcentage. Sans position, les couleurs se répartissent uniformément. En répétant deux fois la même position pour deux couleurs différentes, la transition disparaît et laisse place à une bande nette, technique utilisée pour simuler des rayures ou des zones découpées sans transition.

.trois-couleurs {
  background-image: linear-gradient(
    90deg,
    #6366f1 0%,
    #a855f7 50%,
    #ec4899 100%
  );
}

.rayures {
  background-image: linear-gradient(
    45deg,
    #f1f5f9 25%,
    #e2e8f0 25%,
    #e2e8f0 50%,
    #f1f5f9 50%
  );
  background-size: 20px 20px;
}

L'angle et la direction

linear-gradient() accepte un angle en degrés, 0deg pointant vers le haut et augmentant dans le sens horaire, ou un mot-clé comme to right, to bottom left. Sans angle précisé, la valeur par défaut est to bottom. radial-gradient() accepte de son côté une forme (circle ou ellipse) et une position de départ, par défaut centrée sur l'élément.

Le piège du nom : ce n'est pas le <linearGradient> du SVG

Le SVG possède ses propres éléments <linearGradient> et <radialGradient>, déclarés dans un bloc <defs> puis référencés ailleurs avec fill="url(#monDegrade)". C'est une syntaxe XML complète, pensée pour des formes vectorielles précises, et elle n'a aucun lien de parenté technique avec les fonctions CSS malgré la ressemblance des noms. Le dégradé CSS, lui, ne demande ni définition séparée ni référence : il se déclare directement dans la propriété qui l'utilise.

Combiner un dégradé avec une couleur de repli

Sur un navigateur ancien ou lors d'un chargement très rapide, prévoir une Couleur CSS unie en repli reste une bonne pratique, déclarée avant le dégradé dans le Raccourci background : le navigateur applique la dernière valeur qu'il comprend, ce qui garantit un fond correct même si la syntaxe du dégradé échoue pour une raison quelconque. Cette précaution coûte une seule ligne et évite qu'un visiteur ne se retrouve, ne serait-ce qu'une fraction de seconde, face à un fond totalement blanc.

Questions fréquentes

Oui, en donnant à une ou plusieurs couleurs une valeur avec canal alpha, comme rgba(0, 0, 0, 0) pour un point totalement transparent. C'est la technique utilisée pour assombrir progressivement le bas d'une image sans jamais cacher totalement ce qu'il y a en dessous.

Parce qu'une position de départ a probablement été précisée, par exemple radial-gradient(circle at top left, ...). Sans mot-clé de position, le dégradé radial est toujours centré par défaut sur l'élément qui le porte.

Oui, avec une combinaison un peu détournée : déclarer le dégradé en background-image sur le texte, ajouter background-clip: text pour que le fond épouse exactement la forme des lettres, puis passer color à transparent pour laisser le dégradé transparaître à travers le texte.