Un dégradé CSS, ce sont deux couleurs ou plus et une direction, et le navigateur remplit tout l'entre-deux. C'est le remplissage qui est intéressant, car la façon dont les navigateurs interpolent la couleur par défaut explique pourquoi tant de dégradés paraissent plus boueux que les couleurs qu'on y a mises.
Les angles CSS ne sont pas les angles des maths
Cela fait trébucher quiconque a fait un peu de trigonométrie. En mathématiques, 0 degré pointe à droite et les angles croissent dans le sens antihoraire. Dans les dégradés CSS, 0deg pointe vers le haut et les angles croissent dans le sens horaire. Les deux conventions sont décalées de 90 degrés et tournent en sens inverse.
Ainsi 90deg va vers la droite, 180deg vers le bas, 270deg vers la gauche. Si un dégradé sort pivoté par rapport à ce que vous attendiez, c'est presque toujours la raison — et le remède n'est pas de trafiquer le nombre jusqu'à ce que ça tombe juste, c'est de savoir que CSS part du haut et tourne comme une horloge.
La syntaxe par mots-clés existe pour contourner tout cela : to right, to bottom left. Elle se lit mieux qu'un nombre et ne peut se confondre avec rien, ce qui en fait le meilleur choix chaque fois que la direction est l'une des huit évidentes.
Le milieu boueux, et d'où il vient
Mettez un bleu saturé et un jaune saturé dans un dégradé et regardez ce qui se passe au milieu : ça devient gris. Pas une agréable couleur de transition — une bande morte et délavée qu'aucune des deux couleurs n'aurait laissé prévoir.
La cause est la même que celle qui fait que #808080 n'est pas moitié moins lumineux que le blanc. Par défaut, les navigateurs interpolent les dégradés en sRGB, et les nombres sRGB ne sont pas des quantités de lumière — ils sont encodés perceptuellement. Les moyenner, c'est de l'arithmétique sur la mauvaise échelle, et cela atterrit plus sombre et plus terne que l'œil ne l'attend. Le milieu de deux couleurs vives ressort vidé.
CSS vous laisse désormais dire où interpoler. Écrire linear-gradient(in oklch, blue, yellow) demande au navigateur de mélanger dans un espace perceptuel, et la bande boueuse n'apparaît tout simplement pas — la transition reste vive d'un bout à l'autre. C'est pris en charge par tous les navigateurs actuels, et c'est le changement unique qui améliore le plus un dégradé fait de couleurs saturées. Cet outil génère la syntaxe standard ; ajouter « in oklch » après l'angle est une retouche manuelle qui vaut le coup.
Le banding est de l'arithmétique, pas un bug de rendu
Les dégradés subtils font des bandes. Un lavis doux sur une section hero montre des rayures visibles, et aucun ajustement des couleurs n'y change rien. La raison : huit bits par canal donnent 256 valeurs, et un dégradé ne peut utiliser que les valeurs qui existent entre ses extrémités.
Mesurez, et c'est net. Un dégradé de #404040 à #484848 dispose de huit niveaux d'écart, et l'étirer sur mille pixels produit neuf teintes distinctes — neuf marches, chacune large de plus de cent pixels. Ce sont les bandes. Il n'y a aucune précision manquante à récupérer ; les couleurs sont simplement aussi proches.
Les remèdes sont tous des contournements. Superposez une texture de bruit légère, qui casse les zones plates en tramage et cache la frontière. Prenez un écart de couleur plus large sur la même distance. Ou acceptez-le, le banding se voit bien moins sur une page chargée que sur une page vide. Ce qui ne marche pas, c'est demander au navigateur de faire un effort : il est déjà à la limite de ce que le format sait exprimer.
Le piège de la transparence
Faire disparaître une couleur s'écrit comme un dégradé de cette couleur vers transparent — et sur Safari, le milieu virait au gris, car transparent était interprété comme rgba(0,0,0,0), un noir totalement transparent, et mélanger vers lui traînait tout à travers du noir invisible en chemin.
Les navigateurs modernes interpolent en alpha prémultiplié, ce qui corrige le problème. Mais l'habitude à garder est d'écrire l'extrémité explicitement : rgba(255,0,0,1) vers rgba(255,0,0,0) dit ce que vous voulez dire, ne peut être mal lu par rien, et ne compte pas sur le navigateur pour bien faire avec un mot-clé.
Questions fréquentes
Quelque chose est-il envoyé à un serveur ?
Non. Cet outil porte la mention « client » : l'aperçu, c'est votre navigateur qui rend le CSS, et la règle est assemblée à partir de vos saisies dans la page. Rien n'est transmis.
Pourquoi le milieu de mon dégradé paraît-il gris ?
L'interpolation en sRGB, décrite plus haut. Les deux couleurs sont moyennées sur une échelle encodée perceptuellement plutôt que linéaire, ce qui fait atterrir le milieu plus sombre et plus terne que prévu. Ajoutez « in oklch » après l'angle et cela disparaît — le navigateur mélange alors dans un espace conçu exactement pour cela.
Comment supprimer les rayures d'un dégradé subtil ?
Vous ne pouvez pas, pas directement — elles viennent des 256 niveaux par canal, dont un dégradé subtil n'utilise qu'une poignée. La réponse pratique est une superposition de bruit léger, qui trame les frontières jusqu'à l'invisibilité. C'est le truc que l'imprimerie emploie depuis un siècle, et la raison pour laquelle tant de dégradés « lisses » sur des sites bien faits portent un grain à peine perceptible.
Linéaire ou radial ?
Linéaire pour tout ce qui se lit comme une surface — un fond, un bouton, une section. Radial pour tout ce qui se lit comme une source lumineuse ou un point focal, car c'est à cela qu'un dégradé radial ressemble physiquement. Si vous hésitez, c'est linéaire : les dégradés radiaux attirent l'attention sur leur centre, et si rien au centre ne mérite l'attention, le dégradé pose une question à laquelle le design ne répond pas.
Les dégradés nuisent-ils aux performances ?
Pas de façon notable. Un dégradé CSS est peint une fois et coûte moins que l'image que vous auriez chargée autrement — ce sont des octets non téléchargés. Là où cela coûte, c'est l'animation : animer les arrêts d'un dégradé force un repaint à chaque image, ce qui est cher. S'il vous faut un dégradé mouvant, animez plutôt la transform d'un élément de dégradé surdimensionné et laissez le compositeur faire le travail.