Générateur de dégradé CSS
Concevez des dégradés CSS linéaires, radiaux et coniques avec arrêts de couleur déplaçables, angles, mode répété et interpolation OKLCH. Aperçu en direct, code à copier.
Préréglages
Réglages du dégradé
Arrêts de couleur
Cliquez sur la barre pour ajouter un arrêt, faites glisser les poignées pour les déplacer. Les couleurs acceptent hex, rgb(), hsl() ou oklch().
Aperçu
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
Outils Connexes
Voir ToutQu'est-ce que Générateur de dégradé CSS ?
Un éditeur complet de dégradés CSS prenant en charge linear-gradient, radial-gradient et conic-gradient, leurs variantes répétées et l'interpolation de couleurs moderne (in oklab / in oklch). Les arrêts de couleur se déplacent sur une barre ou se saisissent exactement, et les couleurs acceptent hex, rgb(), hsl() ou oklch().
Comment utiliser Générateur de dégradé CSS
- Choisissez un préréglage ou un Type : Linéaire, Radial ou Conique.
- Réglez l'Angle (linéaire), l'Angle de départ (conique) ou la Forme, la Taille et la position du centre (radial/conique).
- Modifiez les Arrêts de couleur : cliquez sur la barre pour ajouter un arrêt, faites glisser les poignées pour les déplacer, ou saisissez une couleur et une position pour chaque arrêt.
- Cochez éventuellement Dégradé répété et choisissez un Espace colorimétrique d'interpolation (OKLab ou OKLCH).
- Copiez le code CSS.
Exemple
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
Quand utiliser Générateur de dégradé CSS
Utilisez-le pour des fonds, des boutons, des bandeaux, ainsi que des rayures ou des roues chromatiques réalisées avec des dégradés. Pour des fonds « mesh » doux à plusieurs points, utilisez le générateur de dégradé maillé ; pour des effets de type photo sur des images, utilisez plutôt les filtres CSS.
Comment fonctionne Générateur de dégradé CSS
Les arrêts sont triés par position et écrits sous la forme couleur position%. Les dégradés linéaires utilisent un angle en degrés, les dégradés radiaux forme [taille] at x% y%, les dégradés coniques from angle at x% y%. Un clic sur la barre insère un arrêt dont la couleur est interpolée à partir de ses voisins. Lorsqu'un espace d'interpolation est sélectionné, l'outil produit deux déclarations : d'abord un repli sRGB simple, puis le même dégradé avec in oklch (ou in oklab), de sorte que les anciens navigateurs gardent un dégradé fonctionnel et que les navigateurs modernes utilisent le mélange perceptuel plus doux.
Cas d'utilisation courants
- Fonds de bandeaux et de sections
- Boutons et badges en dégradé
- Roues chromatiques et visuels en camembert avec des dégradés coniques
- Fonds rayés avec des dégradés répétés
- Dégradés OKLCH fluides qui évitent le milieu grisâtre des mélanges sRGB
Questions Fréquentes
Pourquoi y a-t-il deux lignes background avec l'interpolation OKLCH ?
Les navigateurs qui ne comprennent pas in oklch ignorent entièrement cette déclaration. La première ligne est un dégradé sRGB normal qu'ils peuvent utiliser ; les navigateurs compatibles appliquent la seconde.
Que change l'interpolation OKLCH ?
Les couleurs sont mélangées dans un espace perceptuellement uniforme : les dégradés entre couleurs saturées restent vifs au lieu de passer par un gris terne ou un milieu boueux.
Puis-je utiliser la transparence ?
Oui. Utilisez rgba(), hsl() ou oklch() avec une valeur alpha (par exemple rgba(0, 0, 0, 0.5)) comme couleur d'arrêt.
Comment faire des rayures nettes ?
Placez deux arrêts à la même position (par ex. jaune 5 % et noir 5 %) et activez Dégradé répété, comme dans le préréglage Rayures.