Générateur de dégradés CSS

À propos de cet outil

Ce générateur de dégradés CSS permet de composer visuellement un dégradé linéaire, radial ou conique à plusieurs couleurs, avec leurs positions et leur opacité. Vous réglez l'angle, la forme et le centre, puis choisissez l'espace dans lequel les couleurs se mélangent : les dégradés calculés en OKLCH évitent les zones grisâtres au milieu d'un dégradé entre deux couleurs vives. Le code généré inclut automatiquement une ligne de repli pour les navigateurs plus anciens.

Comment utiliser cet outil

1. Choisissez le type de dégradé (linéaire, radial ou conique), ou partez d'un exemple.
2. Réglez l'angle, la forme ou le centre, puis ajoutez, supprimez ou déplacez les couleurs avec leur position et leur opacité.
3. Sélectionnez au besoin un autre espace de mélange (OKLab, OKLCH, HSL…) pour obtenir des transitions plus naturelles.
4. Copiez le code CSS généré, qui contient une ligne de repli quand l'espace de mélange n'est pas sRGB.

Les trois familles de dégradés CSS

Un dégradé CSS est une image générée par le navigateur : pas de fichier à télécharger, une netteté parfaite à toutes les tailles, et une valeur utilisable partout où une image est acceptée (background, border-image, mask-image…).

Les versions repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient() répètent le motif défini entre la première et la dernière couleur, ce qui permet de fabriquer des rayures ou des damiers sans image.

• L'angle d'un dégradé linéaire se mesure à partir du haut et tourne dans le sens des aiguilles d'une montre : 0deg (ou to top) va vers le haut, 90deg (to right) vers la droite, 180deg (to bottom) vers le bas, qui est la direction par défaut.
• La position d'une couleur s'exprime en pourcentage ou en longueur. Sans position, les couleurs sont réparties régulièrement.
• Les arrêts francs. Si deux couleurs ont la même position, le passage de l'une à l'autre est net : red 50%, blue 50% trace une ligne de séparation. C'est ainsi qu'on fabrique des rayures et des drapeaux.
• Les points de transition (color hints). Un pourcentage seul entre deux couleurs déplace le milieu de la transition : red, 30%, blue la place à 30 % au lieu de 50 %.

Pourquoi un dégradé est parfois terne : l'espace de mélange

Par défaut, un navigateur mélange les couleurs d'un dégradé dans l'espace sRGB : il interpole chacun des canaux rouge, vert et bleu. C'est simple, mais le résultat peut décevoir. Entre deux couleurs complémentaires vives, comme un bleu et un jaune, le milieu du dégradé passe par un gris terne, parce que les canaux se compensent.

CSS Color 4 permet de choisir un autre espace avec le mot-clé in : linear-gradient(in oklch, #0000ff, #ffff00).

• OKLab mélange selon la luminosité et les axes de couleur perçus : la transition paraît régulière à l'œil, sans zone sombre ou grisâtre.
• OKLCH (et HSL, LCH, HWB) interpole la teinte elle-même : le milieu d'un dégradé entre deux teintes traverse les teintes intermédiaires, donc reste vif. Le chemin de teinte est par défaut le plus court (shorter hue) ; avec longer hue, le dégradé fait le grand tour du cercle chromatique, comme dans un arc-en-ciel.
• sRGB linéaire mélange la lumière physiquement, ce qui éclaircit les transitions entre couleurs sombres.

Les navigateurs récents comprennent cette syntaxe, mais pas les plus anciens, qui ignorent alors la déclaration entière. L'outil génère donc deux lignes : d'abord un dégradé classique, puis le même dégradé avec l'espace choisi. Un navigateur qui ne connaît pas la seconde ligne l'ignore et conserve la première.

Dégradés et transparence

Chaque couleur d'un dégradé peut être semi-transparente. C'est très utile pour estomper une image : un dégradé de rgba(0, 0, 0, 0.6) vers une couleur sans opacité, posé par-dessus une photo, assombrit le bas de l'image pour que le texte qui s'y trouve reste lisible.

Pour un fondu vers « rien », préférez écrire la même couleur à opacité 0 (rgba(198, 113, 57, 0)) plutôt que le mot-clé transparent : sur certains navigateurs anciens, transparent était interprété comme du noir transparent et laissait un halo grisâtre.

Accessibilité et performance

• Le contraste d'un texte posé sur un dégradé varie d'un point à l'autre. Il doit atteindre le seuil requis (4,5 : 1 pour du texte courant) à l'endroit le plus défavorable, pas seulement au centre. Le plus sûr est d'intercaler un voile uni ou presque uni derrière le texte, ou de limiter le dégradé à une zone où il n'y a pas de texte.
• Un dégradé n'est pas une information. La documentation MDN le rappelle à propos des graphiques en secteurs réalisés avec conic-gradient() : une image de fond n'est pas lue par les lecteurs d'écran. Pour un graphique qui porte de la donnée, utilisez un élément avec un texte alternatif ou des données accessibles, et réservez le dégradé à la décoration.
• Les dégradés sont légers : bien plus petits qu'une image équivalente, ils ne coûtent aucune requête réseau. Leur tracé a un coût de rendu, négligeable sauf sur de très grandes surfaces animées. N'animez pas directement la propriété background d'un dégradé (les dégradés ne s'interpolent pas) : déplacez plutôt sa position (background-position) ou superposez-en deux et animez l'opacité de l'un.
• Les bandes visibles (banding). Sur de très larges surfaces à variation lente, les 256 niveaux d'un canal peuvent créer des paliers visibles. Atténuez-les en ajoutant une texture légère par-dessus, ou en raccourcissant la plage de luminosité du dégradé.

Pour choisir les couleurs de départ et d'arrivée, utilisez le générateur de palettes et vérifiez les contrastes avec le convertisseur de couleurs.

Recettes de dégradés utiles

/* Rayures diagonales */
background: repeating-linear-gradient(45deg, #c67139 0 10px, #f5ead8 10px 20px);

/* Barre de progression à 60 % */
background: linear-gradient(to right, #7a8a5e 60%, #ebddc5 60%);

/* Roue chromatique */
background: conic-gradient(in hsl longer hue, hsl(0 100% 50%), hsl(0 100% 50%));

/* Halo lumineux */
background: radial-gradient(circle at 30% 30%, #fff3d6, #c67139 55%, #402310);

/* Bord qui s'estompe sous un texte */
background: linear-gradient(to bottom, transparent, #f5ead8);

Chaque recette utilise l'une des techniques décrites plus haut : angle, arrêts francs pour la barre de progression (deux couleurs à 60 %), plages de positions (#c67139 0 10px pour les rayures), arc complet avec longer hue pour la roue.

Questions fréquentes