Générateur de dégradé CSS
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é.
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.
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é.
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.
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 :
Outils similaires
- Générateur de box-shadow CSSCréez des ombres CSS au curseur : plusieurs ombres, décalage, flou, étendue, couleur avec transparence, inset et modèles – aperçu en direct et CSS à copier.
- Générateur de border-radius CSSArrondissez les coins au curseur : tous liés ou un par un, en px ou %, elliptiques à 8 valeurs – écriture CSS la plus courte, aperçu en direct, CSS à copier.
- Générateur de palette de couleursCréez des couleurs assorties depuis une couleur de base : complémentaire, analogue, triadique, carré, complémentaire adjacent ou monochrome, en HEX, RGB et HSL.
- Convertisseur de couleurs : HEX, RGB, HSL, HSV, CMJNConvertissez vos couleurs : HEX en RGB, RGB en HEX, HSL, HSV, HWB et CMJN. Saisie dans tout format ou via le sélecteur, résultat à copier, dans le navigateur.
- Vérifier et calculer une clé de LuhnVérifiez un numéro avec l’algorithme de Luhn (modulo 10, ISO/IEC 7812-1) ou calculez sa clé – simple contrôle de format, en local dans le navigateur.
- Associer des polices – duos pour titres et texte courantDuos de polices pour titres et texte courant avec aperçu en direct, CSS à copier et disponibilité sur Windows, Mac, iPhone et Android – sans police web.