Générateur de gradient

L’outil de dégradé sert à créer des gradients CSS pour des interfaces, arrière-plans, boutons, graphiques ou maquettes. Il évite d’écrire à la main chaque valeur de linear-gradient ou radial-gradient en permettant de régler les couleurs, les points d’arrêt, la direction, l’angle et l’opacité tout en visualisant le rendu. Il est utile lorsqu’un dégradé doit respecter une charte graphique, garder le texte lisible ou accompagner une transition d’état. Le code CSS obtenu n’est qu’un moyen; un bon dégradé reste lisible, équilibré et adapté au contenu qu’il encadre. Pour une interface réelle, il faut aussi contrôler le contraste sur différents écrans, car un dégradé séduisant en aperçu peut réduire la lisibilité des textes, icônes ou états désactivés.

Les dégradés CSS sont des valeurs d'image, pas des couleurs — linear-gradient(), radial-gradient() et conic-gradient() se résolvent en tokens <image> que le navigateur rasterise dans n'importe quel emplacement background-image, mask-image ou border-image. La forme linéaire prend un angle (0deg pointe vers le haut, 90deg vers la droite, croissant dans le sens horaire) ou un mot-clé 'to <côté>' calculé à partir de la diagonale de la boîte, suivi d'une liste séparée par des virgules de points de couleur avec des positions optionnelles en pourcentage ou en longueur. La forme radiale accepte un forme (circle | ellipse), un mot-clé de taille (closest-side, farthest-corner par défaut) et un ancrage 'at <position>'. La forme conique balaie les points autour d'un centre en commençant à 'from <angle>' et est supportée dans Chrome 69+, Safari 12.1+ et Firefox 83+.<br /><br />L'interpolation des couleurs utilise sRGB par défaut, ce qui est perceptuellement non uniforme et produit une bande grise boueuse entre des teintes éloignées comme le bleu et le jaune. CSS Color Level 4 a introduit des espaces de couleurs explicites via la syntaxe 'in <espace>' — 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' — pour que les transitions restent chromatiques sur tout le spectre. Les bandes de couleurs nettes sont produites en donnant à deux points la même position ('red 50%, blue 50%') et les indications de couleur déplacent le point médian sans ajouter de point ('red, 20%, blue').<br /><br />Lorsqu'un dégradé doit sortir du pipeline CSS, Canvas expose les mêmes primitives : CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1) et createConicGradient(startAngle, x, y) retournent des objets CanvasGradient qui acceptent addColorStop(offset, color) et peuvent être assignés à fillStyle avant export via toDataURL('image/png'). SVG offre les équivalents en balisage <linearGradient> et <radialGradient> avec les valeurs spreadMethod 'pad' (par défaut), 'reflect' et 'repeat' pour le comportement de pavage.

• Forme linéaire : linear-gradient(<angle> | to <côté-ou-coin>, <point-de-couleur>+) — 0deg pointe vers le haut, croît dans le sens horaire ; 'to bottom right' est calculé selon les dimensions de la boîte, pas comme un 135deg littéral
• Forme radiale : radial-gradient([<forme> <taille>]? at <position>, <points>) — mots-clés de taille closest-side, closest-corner, farthest-side, farthest-corner (par défaut)
• Forme conique : conic-gradient(from <angle> at <position>, <points>) — balaie autour du centre ; Chrome 69+, Safari 12.1+, Firefox 83+
• Interpolation des couleurs : CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' remplace le sRGB perceptuellement non uniforme par défaut qui provoque des bandes grises entre des teintes éloignées
• Arrêts nets et indications : deux points à la même position ('red 50%, blue 50%') créent une bande nette ; un pourcentage isolé ('red, 20%, blue') est une indication de couleur qui déplace le point de mélange à 50%
• API Canvas : createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y) retournent CanvasGradient ; addColorStop(offset, color) puis assignation à fillStyle
• Équivalents SVG : <linearGradient> et <radialGradient> avec spreadMethod='pad'|'reflect'|'repeat' contrôlent le pavage au-delà des limites du dégradé