Texte dégradé en CSS, bien fait

Le texte dégradé en CSS se fait en peignant un dégradé en arrière-plan de l’élément de texte, en découpant cet arrière-plan à la forme des lettres avec background-clip: text, puis en rendant le texte lui-même transparent pour que le dégradé transparaisse. Cela demande trois déclarations, marche dans tous les navigateurs actuels et reste du vrai texte, sélectionnable et indexable, pas une image.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Le reste de ce guide traite de ce que la version en trois lignes fait mal : replis manquants, contraste, texte multi-lignes, jambages coupés, et la question de design de savoir quand le texte dégradé aide vraiment. Pour l’allure des lettres dégradées dans les réseaux sociaux et le travail de marque plutôt que sur le web, voyez les effets de texte.

Une recette robuste de texte dégradé avec replis

Si un navigateur applique color: transparent mais pas le découpage, le texte disparaît. Protégez-vous : donnez à l’élément une couleur unie tirée du dégradé, puis passez à la version transparente seulement quand le navigateur confirme la prise en charge. Ajoutez une réinitialisation pour le mode couleurs forcées, où le système remplace vos couleurs et où le texte doit rester visible.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

La page MDN sur background-clip documente la valeur text et sa prise en charge actuelle.

Contraste : vérifiez les deux extrémités du dégradé

Un vérificateur de contraste prend une seule couleur de texte, mais un texte dégradé en a beaucoup. Les mots ne sont lisibles que comme leur partie la plus faible : vérifiez donc l’arrêt le plus clair et le plus sombre contre l’arrière-plan, et regardez aussi le milieu, car un mélange sRGB peut passer plus clair ou plus terne que l’une ou l’autre extrémité. Pour un grand texte d’affichage, les WCAG demandent au moins 3:1 ; pour un texte normal, 4,5:1. Le contraste des couleurs explique les rapports.

Corriger le texte dégradé multi-lignes et les lettres coupées

Sur un élément en ligne qui passe à la ligne, le navigateur étale un seul arrière-plan sur toutes les lignes comme s’il s’agissait d’une seule bande : la première ligne reçoit le début du dégradé et la dernière la fin. En général, vous voulez que chaque ligne porte le dégradé complet. box-decoration-break: clone le fait. Sur les éléments de bloc, comme un titre, le dégradé couvre déjà toute la boîte : un long dégradé sur un titre large peut donc n’en montrer que le milieu sur les lignes courtes.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

Les jambages coupés sont l’autre surprise. L’arrière-plan ne peint que la boîte de l’élément : avec un line-height très serré, les parties des lettres qui dépassent en dessous restent transparentes et disparaissent. Un interligne d’environ 1,1 ou un peu de remplissage en bas règle le problème. Les polices d’affichage en italique peuvent perdre la pointe de leur dernière lettre à droite pour la même raison ; un peu de remplissage en ligne aide.

Quand le texte dégradé marche, et quand il ne marche pas

Une bonne règle : le texte dégradé est un accent, comme l’italique. Un mot mis en valeur dans un titre attire l’œil ; un paragraphe entier le fatigue. Les graisses fortes aident, car les traits fins ne montrent pas assez de couleur pour se lire comme un dégradé. Si le reste de la page utilise déjà des arrière-plans dégradés, une typo unie est souvent le meilleur choix ; le texte sur des arrière-plans dégradés traite ce cas.

Animer le texte dégradé

Pour faire couler la couleur dans les lettres, rendez l’arrière-plan plus grand que le texte et déplacez-le. Dimensionnez-le à 200 % de large et animez background-position dans les deux sens avec alternate, pour qu’il n’y ait jamais de saut au redémarrage de la boucle. Respectez les réglages de mouvement réduit et restez lent : un scintillement toutes les quelques secondes fait soigné, un cycle rapide fait alerte.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

Les mêmes astuces d’arrière-plan alimentent plus largement les dégradés animés en CSS, et les contours dégradés plutôt que les remplissages sont traités dans les bordures dégradées CSS.