Texte en dégradé Tailwind : classes, syntaxe v4 et correctifs

Pour créer un texte en dégradé avec Tailwind, posez un dégradé sur l’élément et découpez-le à la forme des lettres : bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. La première partie peint un fond en dégradé, bg-clip-text rogne ce fond à la forme des glyphes, et text-transparent retire la couleur pleine du texte pour laisser voir le dégradé. Dans Tailwind v3, écrivez bg-gradient-to-r au lieu de bg-linear-to-r ; le reste est identique.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

Comment les classes fonctionnent ensemble

Il est utile de savoir en quoi chaque utilitaire se compile, car tous les bugs de texte en dégradé viennent de l’absence d’une des quatre parties. En coulisses, c’est la même technique que le texte en dégradé en CSS classique : background-clip: text avec un remplissage transparent.

Les directions suivent les suffixes habituels : -to-r, -to-br, -to-b et ainsi de suite. La version 4 accepte aussi un angle, comme bg-linear-45 ou bg-linear-135, et ajoute bg-radial et bg-conic, qui fonctionnent aussi pour le texte. Si vous avez peu utilisé les utilitaires de dégradé, les dégradés Tailwind couvrent les fonds en détail.

Noms de classes Tailwind v4 et v3

Le plus grand changement de la v4 est le nom de l’utilitaire linéaire. bg-gradient-to-r est devenu bg-linear-to-r, pour s’aligner sur les nouveaux utilitaires radial et conique. L’ancien nom se compile encore en v4 par compatibilité, mais le nouveau code devrait utiliser le nouveau.

Exemples de texte en dégradé à copier

Trois ou quatre couleurs voisines sur le cercle chromatique donnent le texte en dégradé le plus net. Les opposées paraissent criardes et peuvent virer au gris au milieu. Ces combinaisons utilisent des couleurs de la palette par défaut, décrite dans les couleurs Tailwind.

Les positions d’arrêt déplacent l’endroit où se trouve chaque couleur. from-20% via-50% to-80% garde une couleur pleine aux deux bouts d’un long titre, ce qui paraît plus calme qu’un fondu qui commence dès la première lettre.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

Le bleu vers le jaune est un bon test d’interpolation. Mélangé en sRGB, il passe par un vert grisâtre ; mélangé en OKLCH, il reste vif. Les dégradés CSS en OKLCH expliquent pourquoi.

Corriger les problèmes courants du texte en dégradé

Titres sur plusieurs lignes

Par défaut, le dégradé couvre toute la boîte de l’élément : un titre qui passe à la ligne reçoit un seul dégradé étiré, avec une deuxième ligne d’une autre couleur que la première. Ajoutez box-decoration-clone pour donner à chaque ligne son dégradé complet, ou inline-block pour réduire la boîte au texte.

Jambages coupés

Un interlignage serré comme leading-none peut trancher le bas d’un g ou d’un y, car le fond s’arrête à la boîte de ligne. Ajoutez pb-1 ou desserrez un peu l’interlignage.

Mode sombre

Un dégradé réglé pour une page blanche paraît terne sur une page sombre. Donnez-lui ses propres nuances avec des variantes : from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. Le même raisonnement vaut pour les fonds, traités dans les dégradés en mode sombre.

Animer un texte en dégradé Tailwind

Un lent miroitement vient d’un fond deux fois plus large que le texte qui glisse sur le côté. En v4, définissez l’animation dans @theme et elle devient un utilitaire animate-*.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

Utilisez-le une fois par page au plus. Le mouvement attire l’œil, ce qui est le but pour un titre de lancement et une gêne partout ailleurs. Le principe est le même que pour les dégradés CSS animés.

Garder le texte en dégradé lisible

1. 1

   Trouvez l’arrêt le plus faible

   La couleur la plus claire sur une page claire, ou la plus sombre sur une page sombre, fixe le contraste que vous obtenez vraiment.

2. 2

   Testez-le comme du texte courant

   Les grands titres en gras demandent au moins 3:1 face à la page selon les WCAG. Contraste des couleurs et accessibilité donne toutes les règles.

3. 3

   Jouez sur la graisse

   Les dégradés se lisent mieux en gras et en graisses lourdes, où il y a plus de surface pour montrer la couleur.

4. 4

   Arrêtez-vous à quelques mots

   Un titre ou un mot mis en valeur. Au-delà, cela commence à ressembler à une erreur d’affichage.

Le texte en dégradé est une technique web. Quand il s’agit d’un post ou d’une bannière et que vous voulez plutôt le dégradé derrière les mots, les Marks Gradiently déplacent leur zone la plus calme derrière le texte et choisissent une encre claire ou sombre ligne par ligne, pour que les mots se lisent sans que vous testiez chaque arrêt.