Générateur de dégradé CSS

Q: Comment faire un dégradé en CSS ?

Avec background-image: linear-gradient(90deg, #3B82F6, #9333EA); – ou via le raccourci background. Placez avant une background-color de repli. Le générateur fournit les deux lignes prêtes à copier.

Q: Comment obtenir des bords nets au lieu de transitions douces ?

Donnez la même position à deux arrêts, p. ex. red 50%, blue 50%, ou deux positions à une couleur : red 0% 50%, blue 50% 100%. Avec « Répéter », on obtient des rayures.

Choisissez le type de dégradé, sa direction et ses couleurs. Réglez chaque arrêt de couleur avec le sélecteur et le curseur, ajoutez-en avec « + Arrêt de couleur ». Le générateur écrit le dégradé en CSS concis et valide, et ajoute une couleur de repli opaque pour background-color, afin que le texte reste lisible même sans dégradé.

Source : css-images-3, § 3.1, W3C – CSS Images Module Level 3: Linear Gradients. Mise à jour : 27 septembre 2026.

Composer le dégradé

background-color: #675BF0;
background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);

Type de dégradé

Direction

0° = vers le haut, 90° = vers la droite, 180° = vers le bas (par défaut)

Arrêts de couleur (modifiables)

Un arrêt par ligne : une couleur et une position facultative en %, p. ex. #3B82F6 0%

Répéter (repeating-…-gradient)

Couleur de repli personnalisée (facultatif)

Laisser vide : moyenne des couleurs du dégradé

Ma boîte à outilsVos saisies sont enregistrées uniquement dans ce navigateur.

Résultat

Déclaration CSS: background-color: #675BF0; background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
Dégradé seul (pour background-image): linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)
Couleur de repli (background-color): #675BF0
Arrêts de couleur et positions calculées: N° Couleur Position indiquée Position utilisée
1 #3B82F6 0 % 0 %
2 #9333EA 100 % 100 %

N°	Couleur	Position indiquée	Position utilisée
1	#3B82F6	0 %	0 %
2	#9333EA	100 %	100 %

Comment le calcul est fait

Trois types de dégradés

Fonction	Dégradé	Par défaut (omis)
`linear-gradient()`	le long d’une droite, selon l’angle choisi	180deg = de haut en bas
`radial-gradient()`	du centre vers l’extérieur	ellipse, centrée, jusqu’au coin le plus éloigné
`conic-gradient()`	autour du centre, comme un camembert	à partir de 0deg (en haut), sens horaire

Pour un dégradé linéaire, l’angle fixe la direction : 0deg vers le haut, 90deg vers la droite, 180deg vers le bas. « Répéter » produit repeating-linear-gradient() et ses variantes : le motif entre le premier et le dernier arrêt se répète – idéal pour des rayures.

Créer un dégradé CSS en 3 étapes

Choisissez le type – linéaire, radial ou conique – ainsi que la direction, l’angle de départ ou la forme.
Placez les arrêts de couleur avec le sélecteur et le curseur, ajoutez-en d’autres ; « Répéter » crée des rayures.
Copiez la déclaration CSS avec sa couleur de repli, ou seulement le dégradé pour background-image.

Arrêts de couleur et positions manquantes

Les positions sont facultatives. Si elles manquent, la spécification du W3C (CSS Images, « Coloring the Gradient Line ») s’applique : le premier arrêt se place à 0 %, le dernier à 100 %, et ceux sans position entre les deux se répartissent uniformément. Une position plus petite qu’une précédente est relevée à celle-ci – c’est ainsi qu’on obtient des bords nets. Deux positions à la suite (red 0% 50%) donnent une bande unie. Le tableau montre la position réellement utilisée par le navigateur.

Pourquoi une couleur de repli ?

Un dégradé est une image. Si elle n’est pas dessinée – en mode de contraste forcé, ou à cause d’une faute de frappe dans la valeur –, il ne reste que background-color. Le générateur y met la moyenne des couleurs pondérée par leur surface.

Exemple linear-gradient(90deg, #3B82F6 0%, #9333EA 100%) : chaque couleur couvre la moitié. Rouge (59 + 147) ÷ 2 = 103, vert (130 + 51) ÷ 2 = 90,5 ≈ 91, bleu (246 + 234) ÷ 2 = 240 – couleur de repli #675BF0. Vérifiez le contraste de votre texte avec cette couleur ainsi qu’avec les zones les plus claires et les plus sombres du dégradé.

Trouvez les couleurs du dégradé avec le générateur de palette de couleurs, convertissez HEX et RGB avec le convertisseur de couleurs et ajoutez des ombres avec le générateur de box-shadow CSS.

Questions fréquentes

Comment faire un dégradé en CSS ?

Avec background-image: linear-gradient(90deg, #3B82F6, #9333EA); – ou via le raccourci background. Placez avant une background-color de repli. Le générateur fournit les deux lignes prêtes à copier.

Comment obtenir des bords nets au lieu de transitions douces ?

Donnez la même position à deux arrêts, p. ex. red 50%, blue 50%, ou deux positions à une couleur : red 0% 50%, blue 50% 100%. Avec « Répéter », on obtient des rayures.

conic-gradient fonctionne-t-il dans tous les navigateurs ?

Oui, dans tous les navigateurs actuels (Chrome et Edge depuis la version 69, Firefox depuis la 83, Safari depuis la 12.1). Pour les très vieux navigateurs, la couleur de repli évite une zone vide.

Puis-je utiliser des couleurs transparentes ?

Oui. Saisissez un arrêt en rgba() ou en HEX à 8 chiffres, p. ex. rgba(0, 0, 0, 0.5). L’aperçu montre la transparence sur un damier. La couleur de repli est toujours opaque.

Comment changer la direction d’un dégradé linéaire ?

Avec l’angle : 0deg vers le haut, 90deg vers la droite, 180deg (par défaut) vers le bas. linear-gradient(90deg, …) équivaut à linear-gradient(to right, …).

Sources et références juridiques

css-images-3, § 3.1: W3C – CSS Images Module Level 3: Linear Gradients
css-images-3, § 3.2: W3C – CSS Images Module Level 3: Radial Gradients
css-images-3, § 3.4.1: W3C – CSS Images Module Level 3: Gradient Color-Stops
css-images-4, § 3.3: W3C – CSS Images Module Level 4: Conic Gradients
MDN Web Docs – linear-gradient()
MDN Web Docs – radial-gradient()
MDN Web Docs – conic-gradient()

Dernière mise à jour : 27 septembre 2026 · Principes éditoriaux