Aller au contenu principal
ToolsByUs

Générer un dégradé CSS

Générateur de dégradés CSS construit un dégradé linéaire, radial ou conique et vous donne le CSS. Il interpole en OKLab plutôt qu’en sRGB, ce qui empêche un dégradé du bleu au jaune de virer au gris au milieu, et il écrit le résultat deux fois : une fois comme dégradé `in oklab` moderne et une fois comme la même courbe échantillonnée en douze arrêts ordinaires, si bien que les navigateurs plus anciens obtiennent la même image.

100 % local

Type

La couleur évolue en ligne droite selon l’angle choisi. C’est l’option la plus courante.

Arrêts (2)

  • 0%
  • 100%

CSS

background: linear-gradient(135deg, #00696f 0.0%, #2d726e 9.1%, #467b6c 18.2%, #5b846a 27.3%, #6f8c67 36.4%, #839563 45.5%, #969d5e 54.5%, #a9a557 63.6%, #bcad4f 72.7%, #cfb544 81.8%, #e2bd35 90.9%, #f5c518 100.0%);
background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);

Deux déclarations dans cet ordre : les navigateurs qui comprennent in oklab utilisent la seconde ; les anciens gardent la première avec la même courbe décrite par des arrêts.

La différence entre les espaces colorimétriques

Les mêmes arrêts interpolés de deux façons. L’écart est plus marqué quand les couleurs sont opposées sur le cercle chromatique : essayez le bleu et le jaune.

sRGB — par défaut

OKLab — in oklab

Version de repli à 12 arrêts

Comment fonctionne Générer un dégradé CSS ?

Un dégradé est une règle pour produire toutes les couleurs entre deux autres, et toute la question est de savoir dans quel espace il fait cette production. Par défaut, c’est sRGB, et l’interpolation sRGB a un échec célèbre : le point médian de deux couleurs saturées provenant de côtés opposés de la roue n’est pas une couleur entre elles, c’est une bouillie désaturée. Du bleu au jaune, on obtient du gris. Du rouge au vert, du brun. Ce n’est pas un bug de navigateur — c’est ce que fait la moyenne de trois canaux encodés en gamma.

Pourquoi OKLab corrige cela

OKLab est un espace perceptuel : ses trois axes correspondent grosso modo à la clarté, au vert-vers-rouge et au bleu-vers-jaune, et les distances qui y sont mesurées correspondent aux distances que l’œil rapporte. Faire la moyenne de deux couleurs dans cet espace donne la couleur qu’une personne nommerait à mi-chemin entre elles, car c’est ce pour quoi l’espace a été construit. CSS Color 4 permet de le demander directement avec in oklab, et tous les navigateurs actuels le prennent en charge.

Ce que fait le repli

in oklab est arrivé dans les navigateurs en 2023. Plutôt que de laisser tout navigateur plus ancien avec un dégradé visiblement différent, cet outil échantillonne la courbe OKLab en douze points et les écrit comme arrêts de couleur ordinaires. Le vieux navigateur interpole alors en sRGB — mais uniquement sur de courts segments dont les extrémités sont déjà sur la bonne courbe, et sur un segment aussi court les deux espaces ne divergent pas visiblement. Les deux déclarations sont émises, dans cet ordre, si bien qu’un navigateur qui comprend la seconde l’utilise et que celui qui ne la comprend pas garde la première.

L’autre chose qui tourne mal avec les dégradés

Le banding. Un dégradé sur une grande zone passe par un nombre limité de valeurs 8 bits, et sur une grande surface unie on peut voir les marches sous forme de bandes. Rien dans le CSS ne peut corriger cela, car l’écran est réellement à court de valeurs ; ce qui corrige, c’est une petite quantité de bruit par-dessus — un PNG en mosaïque de quelques centaines d’octets à 3% d’opacité, ou une couche SVG feTurbulence. Si votre dégradé hero semble strié, c’est cela que vous regardez, et aucun nombre d’arrêts de couleur supplémentaires n’y changera rien.

Et un mot sur leur utilisation tout court

Un dégradé derrière du texte est un problème de contraste : le ratio change sur l’élément, de sorte que le coin qui passe et le coin qui échoue sont tous deux réels. Si du texte doit reposer sur un dégradé, vérifiez les extrêmes plutôt que le milieu, ou placez le texte sur un panneau uni par-dessus le dégradé.

Arrêts et direction

linear, 135°
#00696f  0%
#f5c518  100%

Le CSS, deux fois

background: linear-gradient(135deg, #00696f 0.0%,
  #2a7767 9.1%, #4b855c 18.2%, …);
background: linear-gradient(135deg in oklab,
  #00696f 0%, #f5c518 100%);

Quelles options et quels cas limites Générer un dégradé CSS prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
Linéaireangle135deg0deg pointe vers le haut, 90deg pointe vers la droite. L’angle est la direction dans laquelle les couleurs voyagent, pas la direction de la pente.
Radialcercle au centre—Les couleurs s’étendent à partir du centre. `circle` garde la forme ronde dans une boîte non carrée ; l’ellipse par défaut s’étire avec l’élément.
Coniqueà partir d’un angle135degLes couleurs balayent autour du centre. C’est la base de chaque camembert et cadran en CSS, et du cercle de teinte dans un sélecteur de couleur.
in oklabmot-cléonInterpolation perceptuelle. Supporté depuis 2023 — Chrome 111, Safari 16.2, Firefox 113. Désactivez-le pour voir ce qu’un dégradé standard fait avec les mêmes points d’arrêt.
Repli12 arrêtsautoLa courbe OKLab échantillonnée en points d’arrêt standards, émise comme première des deux déclarations afin que les anciens navigateurs correspondent.
Position de l’arrêt0–100%réparties uniformémentOù sur la ligne de dégradé la couleur se positionne. Deux points d’arrêt à la même position créent un angle dur plutôt qu’un dégradé.
Couleur de l’arrêttoute notation—Hex, rgb(), hsl(), oklch() ou un nom de couleur CSS. L’alpha est conservé, et un dégradé vers `transparent` doit spécifier la couleur avec un alpha 0 plutôt que le mot-clé.
Arrêts2 ou plus2Les nouveaux points d’arrêt se placent dans l’écart le plus large, prenant la couleur que la courbe a déjà à cet endroit, donc en ajouter un ne change pas le dégradé.

Questions fréquentes

Comment créer un dégradé CSS ?

Réglez `background: linear-gradient(135deg, #00696f, #f5c518)` — un angle suivi de deux couleurs ou plus. 0deg va du bas vers le haut et 90deg de gauche à droite. Ajoutez un pourcentage après une couleur pour l’épingler à une position sur la ligne, utilisez `radial-gradient` pour des couleurs rayonnant depuis un point et `conic-gradient` pour des couleurs balayant autour d’un point. Cette page écrit les trois, avec la correction d’interpolation et un repli, à partir des arrêts que vous définissez.

Pourquoi mon dégradé devient-il gris au milieu ?

Parce que le navigateur fait la moyenne de canaux sRGB encodés en gamma, et que la moyenne de deux couleurs saturées provenant de côtés opposés de la roue des couleurs est une couleur désaturée. Du bleu au jaune, c’est le cas classique. Ajouter `in oklab` après l’angle corrige cela — l’interpolation se fait alors dans un espace perceptuel où le point médian est la couleur que vous nommeriez à mi-chemin. Pour les navigateurs plus anciens, utilisez le repli à douze arrêts que cet outil émet à côté.

`in oklab` est-il sûr à utiliser en production ?

Oui, avec le repli. Il est arrivé dans Chrome 111, Safari 16.2 et Firefox 113, ce qui couvre l’écrasante majorité du trafic en 2026. Tout navigateur plus ancien ignore la déclaration entière comme invalide — voilà pourquoi la version à arrêts simples est émise en premier : le CSS prend la dernière déclaration qu’il comprend, si bien que les vieux navigateurs gardent le repli et les nouveaux prennent la version OKLab. Aucun des deux ne voit jamais un arrière-plan cassé.

Pourquoi mon dégradé présente-t-il des bandes visibles ?

C’est le banding, et c’est une limite d’affichage plutôt que du CSS. Sur une grande surface, un dégradé doit passer par un ensemble limité de valeurs 8 bits, et les marches deviennent visibles sous forme de bandes — pire sur les dégradés sombres subtils, là où les valeurs sont perceptuellement les plus éloignées. Plus d’arrêts de couleur n’aidera pas, car les valeurs n’existent tout simplement pas. Une texture de bruit discrète par-dessus, oui : un PNG en mosaïque à environ 3% d’opacité, ou une couche SVG feTurbulence.

Puis-je mettre du texte sur un dégradé ?

Vous pouvez, mais le ratio de contraste diffère en chaque point, si bien que « ça passe » n’est pas un fait unique sur l’élément. Vérifiez le point le plus clair et le point le plus sombre que le texte traverse réellement, et considérez le pire des deux comme le ratio réel. Quand la plage est large, la réponse pratique est de placer le texte sur un panneau uni ou semi-opaque par-dessus le dégradé plutôt que directement dessus.

Comment fondre un dégradé vers la transparence ?

Pas avec le mot-clé `transparent`. Dans plusieurs moteurs, il se résout en noir transparent, donc fondre un rouge vers lui passe par des roses sombres et boueux. Utilisez plutôt la même couleur avec un alpha nul — `#ff0000` vers `#ff000000`, ou `rgb(255 0 0 / 0)` — et la teinte tient jusqu’au bout. Interpoler en OKLab réduit l’effet mais n’en supprime pas la raison.

Équipe ToolsByUs · Comment nous vérifions nos outils