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

Comment utiliser le générateur de dégradés CSS

1. Choisissez un Type de dégradé : Linéaire, Radial ou Conique. Le grand aperçu en haut se met à jour à chaque modification.
2. Pour un dégradé linéaire, réglez l’Angle avec le curseur ou saisissez-le en degrés (90° va de gauche à droite, 180° de haut en bas). Pour un dégradé conique, l’angle indique où commence le balayage.
3. Pour les dégradés radiaux et coniques, déplacez le centre avec Centre X et Centre Y. Un dégradé radial peut être un Cercle ou une Ellipse (menu Forme).
4. Modifiez les Arrêts de couleur. Cliquez n’importe où sur la barre pour y ajouter un arrêt, avec la couleur que le dégradé a déjà à cet endroit, ou utilisez Ajouter un arrêt pour combler le plus grand écart. Faites glisser une poignée pour la déplacer. Chaque arrêt a aussi sa ligne, où vous pouvez choisir sa couleur, saisir n’importe quelle couleur CSS, régler sa Position (%) ou le Supprimer (un dégradé garde au moins deux arrêts).
5. Si besoin, cochez Répété, choisissez l’Interpolation des couleurs, cliquez sur Inverser pour retourner les arrêts ou sur Dégradé aléatoire pour trouver l’inspiration.
6. Copiez le résultat depuis Code CSS avec Copier.

Au clavier : sélectionnez une poignée de la barre, puis utilisez les flèches pour la déplacer de 1 % (10 % avec Maj), Début et Fin pour la placer aux extrémités, et Suppr pour l’enlever.

Les trois fonctions de dégradé

• linear-gradient() fond les couleurs le long d’une droite. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) va de l’indigo à gauche au rose à droite. Les angles tournent dans le sens des aiguilles d’une montre à partir du haut : 0deg pointe vers le haut, 90deg vers la droite.
• radial-gradient() rayonne depuis un point central. radial-gradient(circle at 30% 40%, …) place le centre à 30 % du bord gauche et 40 % du haut. Une ellipse s’étire avec la boîte, un cercle reste rond.
• conic-gradient() tourne autour d’un centre, comme les aiguilles d’une horloge. conic-gradient(from 0deg at 50% 50%, …) sert aux roues chromatiques, aux camemberts et aux indicateurs de chargement. Les positions des arrêts sont des fractions du tour complet.

L’option Répété utilise repeating-linear-gradient() et ses variantes : le motif défini par vos arrêts se répète jusqu’à remplir la boîte. Placez le dernier arrêt bien avant 100 % (par exemple à 20 %) pour obtenir des rayures ou des anneaux.

Deux arrêts à la même position créent une transition nette au lieu d’un fondu : c’est ainsi qu’on dessine des rayures ou des drapeaux. Le générateur trie les arrêts par position dans le code, comme l’exige le CSS.

Interpolation sRGB ou OKLCH

Par défaut, les navigateurs mélangent les couleurs d’un dégradé en sRGB. Entre deux couleurs saturées, comme le bleu et le jaune, le milieu devient souvent grisâtre ou terne. CSS Color niveau 4 permet de choisir l’espace d’interpolation : linear-gradient(90deg in oklch, …) mélange dans l’espace perceptuel OKLCH et garde un milieu éclatant.

Avec OKLCH (plus doux, avec repli sRGB), l’outil écrit deux déclarations background : d’abord la version sRGB classique, puis la version OKLCH. Les navigateurs qui gèrent les espaces d’interpolation (Chrome et Edge 111+, Safari 16.2+, Firefox 127+) appliquent la seconde ligne ; les plus anciens l’ignorent et gardent la première.

Astuces

• Les couleurs transparentes sont acceptées dans les champs des arrêts, par exemple #00000080 ou rgb(0 0 0 / 50%), pratique pour assombrir une image.
• Le code utilise background. Préférez background-image si vous réglez séparément les autres propriétés du fond.
• Un dégradé discret (deux teintes proches d’une même couleur) fait souvent plus professionnel qu’un arc-en-ciel.