Classes de dégradé Tailwind : linéaire, radial et conique en v4

Un dégradé Tailwind se construit avec deux types d’utilitaires : un qui fixe le type et la direction du dégradé, comme bg-linear-to-r, et des utilitaires d’arrêts de couleur qui le remplissent, comme from-indigo-500 to-pink-500. Dans Tailwind CSS v4, les utilitaires de direction ont été renommés de bg-gradient-to-* en bg-linear-to-*, les angles comme bg-linear-45 sont devenus possibles sans CSS personnalisé, et les dégradés radiaux et coniques sont arrivés comme utilitaires à part entière.

<div class="h-32 rounded-2xl bg-linear-to-r from-indigo-500 to-pink-500"></div>

Tout ce qui suit s’appuie sur la documentation officielle de Tailwind sur background-image. Pour comprendre ce que fait le CSS généré, le guide du dégradé linéaire en CSS explique la fonction sous-jacente.

Dégradés linéaires : directions et angles

bg-linear-to-t, -tr, -r, -br, -b, -bl, -l et -tl orientent le dégradé vers un côté ou un coin. Pour toute autre direction, utilisez un angle : bg-linear-45 ou bg-linear-160. Ajoutez un signe moins devant pour les angles négatifs, comme dans -bg-linear-45.

En coulisses, un utilitaire de direction définit une variable appelée --tw-gradient-position et écrit background-image: linear-gradient(var(--tw-gradient-stops)), tandis que les utilitaires de couleur remplissent --tw-gradient-stops. La partie in oklab est ajoutée dans un test @supports, si bien que les navigateurs sans prise en charge de l’interpolation obtiennent quand même un dégradé sRGB fonctionnel. Cette séparation explique aussi pourquoi direction et couleurs peuvent changer indépendamment, par exemple seulement la couleur de fin au survol ou en mode sombre avec dark:to-violet-900.

Arrêts de couleur : from, via et to

from-* définit la couleur de départ, to-* la couleur d’arrivée, et via-* ajoute une couleur au milieu. Toutes les couleurs de votre thème fonctionnent, y compris avec des modificateurs d’opacité comme from-indigo-500/60. Ajoutez un utilitaire de pourcentage après une couleur pour déplacer son arrêt : from-10%, via-30%, to-90%. Les positions arbitraires fonctionnent aussi, comme from-[21.5%].

<!-- three stops, evenly spaced -->
<div class="bg-linear-to-r from-indigo-500 via-sky-500 to-emerald-500"></div>

<!-- the same stops, pulled towards the edges -->
<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>

Dégradés radiaux et coniques dans Tailwind v4

bg-radial dessine un dégradé radial depuis le centre, et les mêmes utilitaires d’arrêts de couleur le remplissent. Déplacez le centre avec une valeur arbitraire, où les tirets bas remplacent les espaces : bg-radial-[at_25%_25%]. bg-conic fait tourner les couleurs autour du centre, et bg-conic-180 fait pivoter l’angle de départ.

<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>

Modificateurs d’interpolation : oklab, oklch et sens de la teinte

Tailwind v4 fond les dégradés en oklab par défaut, ce qui évite déjà la plupart des milieux gris. Ajoutez un modificateur après la direction pour le changer : /srgb correspond aux anciennes créations, /oklch garde une saturation élevée entre des teintes éloignées, et /longer, /shorter, /increasing et /decreasing choisissent le sens de la teinte. L’explication se trouve dans l’interpolation OKLCH des dégradés CSS.

Dégradés personnalisés et couleurs de marque

Ajoutez vos couleurs de marque à votre thème et elles deviennent disponibles pour chaque utilitaire de couleur, y compris from-*, via-* et to-*. Pour un dégradé que les utilitaires ne savent pas exprimer, comme quatre arrêts ou plus ou un angle inhabituel, utilisez une valeur arbitraire avec des tirets bas à la place des espaces, ou faites pointer un utilitaire vers une propriété personnalisée.

@import "tailwindcss";

@theme {
  --color-dusk: oklch(28% 0.09 285);
  --color-ember: oklch(70% 0.19 40);
}

:root {
  --brand-gradient: linear-gradient(135deg in oklch, var(--color-dusk), var(--color-ember));
}

<!-- brand colours through the stop utilities -->
<div class="bg-linear-135 from-dusk to-ember"></div>

<!-- the whole gradient from a custom property -->
<div class="bg-(image:--brand-gradient)"></div>

<!-- a one-off arbitrary gradient -->
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal]"></div>

Garder le dégradé de marque dans une seule variable veut dire qu’il est écrit une fois et utilisé partout, et c’est ce qui rend un dégradé reconnaissable. L’identité de marque en dégradé explique pourquoi cette constance compte plus que les couleurs elles-mêmes.

Texte en dégradé et états de survol dans Tailwind

Le texte en dégradé utilise les mêmes classes, plus bg-clip-text et text-transparent. Les variantes fonctionnent sur les utilitaires d’arrêts : hover:from-pink-500 change une couleur au survol. Les dégradés eux-mêmes ne s’animent pas en transition : pour un survol fluide, faites varier l’opacité d’un calque superposé ou déplacez bg-position au lieu de changer les arrêts.

<h1 class="bg-linear-to-r from-violet-600 to-rose-600 bg-clip-text text-5xl font-bold text-transparent">
  Launch day
</h1>

<a class="bg-linear-to-r from-violet-600 to-rose-600 bg-size-[200%_100%] bg-left px-5 py-3 text-white transition-[background-position] duration-500 hover:bg-right">
  Get started
</a>

Plus de détails sur la technique du texte, contraste et solutions de repli compris, dans le texte en dégradé en CSS.