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

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

1. Choisissez le type de dégradé et sa direction.
2. Réglez les couleurs et leurs positions.
3. Copiez le CSS obtenu.

Les trois types

CSS propose trois fonctions de dégradé, chacune répondant à un besoin distinct.

linear-gradient progresse en ligne droite. On lui donne un angle — 0deg va du bas vers le haut, 90deg de la gauche vers la droite — ou un mot-clé comme « to right ».

radial-gradient part d'un point et s'étend. Il sert aux halos lumineux et aux vignettages, et l'on peut en régler la forme (circle ou ellipse) et la taille.

conic-gradient tourne autour d'un point. C'est lui qui permet les diagrammes circulaires, les roues chromatiques et les bordures tournantes sans aucune image.

Les trois ont une variante repeating- qui répète le motif, utile pour des rayures et des textures, à employer avec modération.

Et les trois se superposent : plusieurs dégradés séparés par des virgules dans background-image, le premier étant au-dessus. Combiner un dégradé semi-transparent sur un autre est la manière habituelle d'obtenir de la profondeur.

Le problème du gris central

Si votre dégradé entre deux couleurs vives passe par un centre terne, voici pourquoi.

L'interpolation se fait par défaut dans l'espace sRGB, et le trajet direct entre deux teintes éloignées traverse la zone désaturée de l'espace colorimétrique.

Le cas d'école est le bleu vers le jaune : le milieu donne un gris verdâtre sale au lieu du vert attendu.

La solution moderne consiste à préciser l'espace d'interpolation : linear-gradient(in oklch, bleu, jaune). En interpolant dans OKLCH, le trajet conserve la saturation et le résultat est nettement plus propre.

On peut aussi ajouter « shorter hue » ou « longer hue » pour choisir de quel côté du cercle chromatique passe la transition, ce qui change totalement les teintes intermédiaires.

S'il vous faut la compatibilité avec des navigateurs anciens, la parade classique reste d'ajouter une ou deux couleurs intermédiaires à la main pour forcer le trajet.

Bandes, performance et accessibilité

Trois points pratiques qui surgissent au passage en production.

Les bandes — ces franges visibles dans les transitions douces et étendues — viennent de la précision de 8 bits par canal. Elles se remarquent surtout sur de grands dégradés entre teintes très proches.

La parade habituelle consiste à superposer une texture de bruit très discrète, qui casse visuellement les bandes. Éviter les dégradés immenses entre couleurs quasi identiques aide également.

Côté performance : les dégradés CSS se rendent très bien, mais animer background-image force un recalcul à chaque image. Pour animer, déplacez le dégradé avec transform ou animez la position du fond, jamais les couleurs.

Et le point le plus oublié : le texte posé sur un dégradé a un contraste variable. Il peut satisfaire le niveau AA d'un côté et échouer de l'autre. Vérifiez le contraste au point le plus défavorable, pas seulement au centre.

Si le dégradé est purement décoratif, cela suffit. Mais s'il porte du texte, envisagez un aplat semi-transparent derrière celui-ci.

Questions fréquentes