Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Construit un dégradé linéaire, radial ou conique et émet le CSS, y compris la clause d’interpolation `in oklch` qui décide de ce qui se passe entre les arrêts. Les mêmes arrêts sont toujours dessinés une seconde fois en sRGB en dessous, parce que l’argument en faveur d’une interpolation dans un espace perceptuel est un argument visuel et que quatre centimètres de dégradé vont plus vite qu’un paragraphe.
Les mêmes arrêts en sRGB, pour comparer. Si le milieu de cette bande paraît délavé à côté de celle du dessus, c’est que l’espace d’interpolation fait son travail : une droite dans le cube sRGB entre deux teintes opposées passe près de l’axe neutre.
Fait le tour de la roue des teintes, si bien que le point médian garde son chroma. La valeur par défaut, et la raison pour laquelle CSS s’est doté de cette syntaxe.
Arrêts
- 0%
- 100%
Préréglages
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);La clause in oklch demande un navigateur de 2023 ou plus récent. Les moteurs plus anciens jettent toute la déclaration au lieu de se rabattre sur autre chose : doublez-la donc d’un dégradé sRGB ordinaire dans une déclaration précédente si vous les prenez en charge.
Comment s’en servir
Choisissez le type, puis l’angle
Le linéaire voyage en ligne droite, le radial s’étend depuis un point, le conique balaie autour d’un point. L’angle s’applique au linéaire et au conique ; le radial prend plutôt une forme et un centre.
Placez les arrêts
Chaque arrêt a une couleur et une position de 0 à 100 %. Deux est le minimum ; en ajouter un redistribue les positions régulièrement, après quoi vous pouvez les déplacer. Les préréglages sont un moyen rapide de voir comment se comportent trois ou quatre arrêts.
Choisissez l’espace d’interpolation — c’est la vraie décision
OKLCH garde le chroma au milieu, ce qui empêche un bleu-vers-jaune de virer au gris à mi-chemin. OKLab prend le chemin perceptuel le plus court et convient quand les deux arrêts sont proches en teinte. sRGB est le comportement historique, et vaut d’être choisi délibérément s’il vous faut que les vieux navigateurs donnent le même résultat que les nouveaux.
Dans un espace polaire, décidez du sens autour de la roue
OKLCH, LCH et HSL sont polaires, il existe donc deux arcs entre deux teintes. `shorter` est le défaut et en général ce que vous voulez ; `longer` transforme un dégradé à deux arrêts en arc-en-ciel, ce qui est parfois exactement l’effet recherché.
Copiez la valeur ou la déclaration entière
La valeur va dans un `background-image` existant ; la déclaration est prête à coller telle quelle.
Questions fréquentes
`in oklch` marchera-t-il dans tous les navigateurs ?
Non. Il faut un moteur de 2023 ou plus récent, et un moteur plus ancien abandonne la déclaration entière au lieu de retomber sur le sRGB : il n’y a pas de prise en charge partielle ici. Mettez un dégradé sRGB simple dans une déclaration précédente et laissez le moteur récent l’écraser, ce qui est le repli standard de la cascade CSS et coûte une ligne de plus.
Pourquoi la bande sRGB devient-elle grise au milieu ?
Parce qu’interpoler en sRGB trace une ligne droite à travers le cube des couleurs, et que la ligne entre deux teintes à peu près opposées passe près de l’axe neutre. Rien ne va mal dans le dégradé : il fait exactement ce que disent les nombres, et les nombres n’ont jamais parlé de l’apparence des couleurs.
Mon dégradé présente des bandes visibles. Cela peut-il les corriger ?
Pas directement. Le bandage vient de la quantification sur 8 bits d’une rampe lente sur une grande surface, et aucun choix d’espace d’interpolation ne le supprime. Les réponses habituelles sont une légère surcouche de bruit, une texture répétée discrète, ou faire parcourir au dégradé une plus courte distance. Cet outil n’émet que du CSS et ne fait aucun tramage.
Puis-je l’exporter en image ?
Non. La sortie est une valeur CSS, qui est plus légère que n’importe quelle image du même dégradé, indépendante de la résolution et animable. S’il vous faut un fichier matriciel — pour un gabarit d’e-mail, par exemple, où les dégradés CSS ne sont pas fiables —, faites une capture de l’aperçu ou construisez-le dans le générateur de motifs, qui dessine dans un canvas.
À alimenter depuis
Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Générateur de motifs de fond
Background Pattern Generator
Produit des motifs SVG raccordables — rayures, pois, quadrillages, grain — avec réglage des couleurs et de l’échelle.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Générateur de motifs de fond
Background Pattern Generator
Produit des motifs SVG raccordables — rayures, pois, quadrillages, grain — avec réglage des couleurs et de l’échelle.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.