# Texte en dégradé Tailwind : classes, syntaxe v4 et correctifs
[Canonical HTML page](https://gradiently.design/fr/guide/tailwind-gradient-text)
Quatre utilitaires transforment un titre en texte en dégradé. Les détails autour décident s’il paraît net ou rogné. Voici les classes pour Tailwind v4 et v3, et les problèmes que vous rencontrerez.
## The short version
- Un texte en dégradé Tailwind demande un fond en dégradé, `bg-clip-text` pour le découper à la forme des lettres, et `text-transparent` pour que le fond apparaisse.
- Dans Tailwind v4, l’utilitaire de dégradé est `bg-linear-to-r`, tandis que la v3 utilise `bg-gradient-to-r` ; les classes de couleur from, via et to fonctionnent de la même façon dans les deux.
- Tailwind v4 permet de choisir l’espace d’interpolation avec un modificateur comme `bg-linear-to-r/oklch`, qui garde le milieu d’un dégradé lumineux.
- Ajoutez `box-decoration-clone` quand un titre en dégradé passe sur plusieurs lignes, et un peu de marge intérieure en bas quand les jambages sont coupés.
- Vérifiez le contraste de la couleur la plus claire du dégradé avec la page, car c’est là que le texte en dégradé devient difficile à lire.
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.
```html
Ship the quiet version
```
Tout l’effet en une liste de classes. L’ordre dans l’attribut class n’a pas d’importance.
## 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](https://gradiently.design/fr/guide/css-gradient-text) classique : `background-clip: text` avec un remplissage transparent.
| Utilitaire | Ce qu’il définit | Si vous l’oubliez |
| --- | --- | --- |
| `bg-linear-to-r` | Un dégradé linéaire vers la droite | Aucun dégradé |
| `from-*` `via-*` `to-*` | Les arrêts de couleur | Des arrêts transparents ou par défaut |
| `bg-clip-text` | `background-clip: text` | Une boîte colorée derrière un texte plein |
| `text-transparent` | `color: transparent` | Le texte plein recouvre le dégradé |
Les quatre parties du texte en dégradé Tailwind et le symptôme que chacune laisse quand elle manque.
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](https://gradiently.design/fr/guide/tailwind-gradient) 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.
| Ce que vous voulez | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| De gauche à droite | `bg-linear-to-r` | `bg-gradient-to-r` |
| En diagonale | `bg-linear-to-br` ou `bg-linear-45` | `bg-gradient-to-br` |
| Radial | `bg-radial` | Valeur arbitraire seulement |
| Conique | `bg-conic` | Valeur arbitraire seulement |
| Mélange OKLCH | `bg-linear-to-r/oklch` | Non disponible |
| Découpe au texte | `bg-clip-text` | `bg-clip-text` |
Côte à côte, pour savoir pour quelle version un extrait trouvé en ligne a été écrit.
## 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](https://gradiently.design/fr/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Chaque étiquette liste les arrêts dans l’ordre : le premier va dans `from-*`, celui du milieu dans `via-*`, le dernier dans `to-*`. Les nuances 600 gardent assez de contraste sur une page blanche ; sur une page sombre, passez en 300 ou 400. Les valeurs hexadécimales sont celles de la palette v3 ; les versions OKLCH de la v4 sont très proches.
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.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Des positions d’arrêt, un modificateur d’interpolation et un dégradé entièrement personnalisé. Les valeurs arbitraires fonctionnent en v3 et en v4.
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](https://gradiently.design/fr/guide/css-gradient-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](https://gradiently.design/fr/guide/dark-mode-gradients).
### À éviter
- Du texte en dégradé sur de longs paragraphes
- Un arrêt pâle qui disparaît sur le blanc
- Des couleurs complémentaires avec un milieu gris
- Du texte en dégradé sur un fond en dégradé
- Oublier une couleur pleine pour le texte sélectionné
### À faire
- Le réserver à un titre ou à un seul mot
- Vérifier l’arrêt le plus clair face à la page
- Des teintes voisines, ou une interpolation OKLCH
- Un fond uni derrière les mots en dégradé
- Définir `selection:text-white selection:bg-violet-600`
## 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-*`.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Ajoutez ensuite `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` au titre, et répétez la première couleur comme dernier arrêt pour que la boucle n’ait pas de saut.
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](https://gradiently.design/fr/guide/css-animated-gradient).
## Garder le texte en dégradé lisible
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. **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é](https://gradiently.design/fr/guide/color-contrast-accessibility) donne toutes les règles.
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. **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.
## FAQ
### Comment faire un texte en dégradé avec Tailwind ?
Ajoutez un dégradé avec `bg-linear-to-r` (ou `bg-gradient-to-r` en v3), des arrêts de couleur avec `from-*` et `to-*`, puis `bg-clip-text` et `text-transparent`.
### Pourquoi mon texte en dégradé Tailwind ne s’affiche-t-il pas ?
En général, `text-transparent` manque et le texte plein recouvre le dégradé, ou `bg-clip-text` manque et le dégradé remplit une boîte derrière les mots. Vérifiez que les quatre parties sont sur le même élément.
### Qu’est-ce qui remplace bg-gradient-to-r dans Tailwind v4 ?
L’utilitaire linéaire s’appelle désormais `bg-linear-to-r`. L’ancien nom fonctionne encore par compatibilité, et la v4 ajoute `bg-radial`, `bg-conic` et des utilitaires d’angle comme `bg-linear-45`.
### Comment éviter que le texte en dégradé coupe les lettres comme g et y ?
Ajoutez un peu de marge intérieure en bas, comme `pb-1`, ou desserrez l’interlignage, car le fond découpé s’arrête à la boîte de ligne.
### Le texte en dégradé est-il accessible ?
Il peut l’être si chaque partie du dégradé respecte les exigences de contraste face à la page. Testez l’arrêt le plus clair et réservez le texte en dégradé aux titres.