# Classes de dégradé Tailwind : linéaire, radial et conique en v4 [Canonical HTML page](https://gradiently.design/fr/guide/tailwind-gradient) Tailwind v4 a renommé ses utilitaires de dégradé, ajouté les angles, les dégradés radiaux et coniques, et fait passer le fondu par défaut en oklab. Voici tout le système, avec le CSS que produit chaque classe. ## The short version - Dans Tailwind CSS v4, les dégradés linéaires utilisent bg-linear-to-* pour les directions et bg-linear- pour les angles, à la place des noms bg-gradient-to-* de la v3. - Les couleurs s’ajoutent avec les utilitaires from-*, via-* et to-*, et leurs positions avec des utilitaires en pourcentage comme from-10% et to-90%. - Tailwind v4 ajoute les utilitaires bg-radial et bg-conic, avec des valeurs arbitraires pour les positions, comme bg-radial-[at_25%_25%]. - Les dégradés de Tailwind v4 se fondent en oklab par défaut, et des modificateurs comme /oklch, /srgb et /longer changent l’interpolation. - Tout dégradé que Tailwind ne sait pas exprimer avec ses utilitaires peut s’écrire en valeur arbitraire, comme bg-linear-[25deg,red_5%,yellow_60%]. 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. ```html
``` Un dégradé de gauche à droite, de l’indigo au rose. Aucun CSS personnalisé nécessaire. from-indigo-500 to-pink-500: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(65.6% 0.241 354.308))` Le rendu de cette liste de classes : `to right in oklab`, avec les indigo-500 et pink-500 par défaut de Tailwind. Tout ce qui suit s’appuie sur [la documentation officielle de Tailwind sur background-image](https://tailwindcss.com/docs/background-image). Pour comprendre ce que fait le CSS généré, le guide du [dégradé linéaire en CSS](https://gradiently.design/fr/guide/css-linear-gradient) 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`. | Classe | Direction générée | Remplace en v3 | | --- | --- | --- | | `bg-linear-to-r` | `to right in oklab` | `bg-gradient-to-r` | | `bg-linear-to-br` | `to bottom right in oklab` | `bg-gradient-to-br` | | `bg-linear-45` | `45deg in oklab` | une valeur arbitraire | | `bg-linear-to-b/srgb` | `to bottom in srgb` | le fondu par défaut de la v3 | | `bg-(image:--brand-gradient)` | `var(--brand-gradient)` comme image entière | `bg-[image:var(--x)]` | Les utilitaires de direction de Tailwind v4 et le CSS qu’ils produisent. 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`. > **Migrer depuis la v3** Les anciennes classes `bg-gradient-to-r` compilent toujours en v4 : un projet migré ne cassera pas. Renommez-les en `bg-linear-to-r` au fil des fichiers que vous modifiez, et attendez-vous à des couleurs un peu plus lumineuses au milieu, car le fondu se fait désormais en oklab. ## 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%]`. ```html
``` Les positions changent l’endroit où chaque couleur est pleinement elle-même. - Réguliers : indigo, ciel, émeraude: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(68.5% 0.169 237.323), oklch(69.6% 0.17 162.48))` - Positionnés : 10 %, 30 %, 90 %: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117) 10%, oklch(68.5% 0.169 237.323) 30%, oklch(69.6% 0.17 162.48) 90%)` Le rendu des deux listes de classes ci-dessus. ## 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. ```html
``` Une sphère éclairée et un disque métallique, chacun en une ligne. - bg-radial-[at_25%_25%]: `radial-gradient(at 25% 25% in oklab, #ffffff, oklch(21% 0.006 285.885) 75%)` - bg-conic-180: `conic-gradient(from 180deg in oklab, oklch(51.1% 0.262 276.966), oklch(96.2% 0.018 272.314), oklch(51.1% 0.262 276.966))` Rendus approximatifs des deux éléments ci-dessus. Pour les fonctions sous-jacentes, voyez [les dégradés radiaux en CSS](https://gradiently.design/fr/guide/css-radial-gradient) et [les dégradés coniques en CSS](https://gradiently.design/fr/guide/css-conic-gradient). ## 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](https://gradiently.design/fr/guide/css-gradient-oklch). - bg-linear-to-r/srgb: `linear-gradient(to right in srgb, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))` - bg-linear-to-r (oklab): `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))` - bg-linear-to-r/oklch: `linear-gradient(to right in oklch, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))` - bg-linear-to-r/longer: `linear-gradient(to right in oklch longer hue, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))` `from-indigo-500 to-teal-400` avec quatre réglages d’interpolation. Le dernier fait le grand tour du cercle des teintes. ## 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. ```css @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)); } ``` Des couleurs de thème pour les utilitaires d’arrêts, et un dégradé complet conservé dans une propriété personnalisée. ```html
``` Trois façons d’aller au-delà de la palette par défaut. 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é](https://gradiently.design/fr/guide/gradient-branding) 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. ```html

Launch day

Get started ``` Du texte en dégradé, et un bouton dont le dégradé glisse au survol. ### À éviter - Copier le `bg-gradient-to-r` de la v3 dans de nouveaux projets v4 - De longues listes de classes répétées sur chaque carte - `/srgb` sur des fondus entre des teintes éloignées - Changer les arrêts au survol en espérant un fondu fluide ### À faire - Utiliser `bg-linear-to-*` et `bg-linear-` - Des couleurs de thème ou une propriété personnalisée pour les dégradés de marque - Garder l’oklab par défaut, ou essayer `/oklch` pour des fondus éclatants - Animer la position ou l’opacité d’un calque superposé Plus de détails sur la technique du texte, contraste et solutions de repli compris, dans [le texte en dégradé en CSS](https://gradiently.design/fr/guide/css-gradient-text). ## FAQ ### Comment faire un dégradé avec Tailwind CSS ? Combinez un utilitaire de direction avec des arrêts de couleur, par exemple `bg-linear-to-r from-indigo-500 to-pink-500`. Ajoutez `via-*` pour une couleur intermédiaire. ### Qu’est-ce qui remplace bg-gradient-to-r dans Tailwind v4 ? `bg-linear-to-r`. En v4, les noms sont `bg-linear-to-*` pour les directions et `bg-linear-` pour les angles, comme `bg-linear-45`. ### Tailwind prend-il en charge les dégradés radiaux et coniques ? Oui, depuis la v4 : `bg-radial` et `bg-conic`, avec des positions arbitraires comme `bg-radial-[at_25%_25%]` et des angles comme `bg-conic-180`. ### Comment faire du texte en dégradé avec Tailwind ? Ajoutez `bg-clip-text` et `text-transparent` à un élément doté de classes de dégradé, comme `bg-linear-to-r from-violet-600 to-rose-600`. ### Pourquoi mes dégradés Tailwind v4 sont-ils différents de ceux de la v3 ? La v4 fond en oklab par défaut et sa palette par défaut est définie en oklch. Ajoutez `/srgb` à l’utilitaire de direction pour retrouver l’ancien fondu.