Générateur de dégradé CSS

Un dégradé de couleur réglé à l'œil, un code CSS prêt à coller

Ce générateur de dégradé affiche votre dégradé en grand et écrit le code CSS en direct. Vous choisissez le type (« Linéaire », « Radial » ou « Conique »), l'angle, puis de 2 à 8 arrêts de couleur, chacun avec sa position et son opacité. Tout est calculé dans votre navigateur, sans logiciel de dessin.

Comment créer un dégradé CSS

1. Choisissez le type. En linéaire, réglez l'« Angle » au curseur ou cliquez sur une flèche de « Direction ». En radial, choisissez la « Forme » (cercle ou ellipse) et la position du centre.
2. Sous « Arrêts de couleur », cliquez sur la barre pour ajouter un arrêt et faites glisser une poignée, à la souris ou au doigt. Chaque ligne règle la couleur (sélecteur ou code HEX), la « Position % » et l'« Opacité % ». Le bouton × supprime l'arrêt, « Inverser l'ordre » retourne le dégradé.
3. Sous « Code CSS », choisissez le format : background, background-image, « Classe utilitaire » ou « SVG » (en linéaire seulement), puis cliquez sur « Copier le code ».
4. « Télécharger le PNG » enregistre une image de 1920 × 1080 px par défaut, 8000 px au plus par côté.

« Dégradé au hasard » (ou la barre d'espace) tire 2 ou 3 couleurs aux teintes voisines ou opposées, et la galerie propose 16 modèles. « Enregistrer ce dégradé » en garde jusqu'à 12 sur votre appareil ; au-delà, il faut en supprimer un. L'adresse de la page suit chaque réglage : copiez-la pour partager le dégradé.

La syntaxe des dégradés CSS

Au premier affichage, l'outil écrit :

background: #1f5fe0;

background: linear-gradient(90deg, #1f5fe0 0%, #e0409b 100%);

La première ligne est une couleur unie de repli. La seconde dessine le dégradé : un angle, puis les arrêts, chacun fait d'une couleur et d'une position. Pour les angles, 0deg monte vers le haut, 90deg va vers la droite, 180deg descend. Les mots-clés disent la même chose : to right vaut 90deg, to bottom vaut 180deg.

• radial-gradient(circle at 50% 50%, #fff3b0 0%, #7a1f3d 100%) part d'un centre et s'étend en cercle jusqu'au coin le plus éloigné.
• conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%) tourne autour du centre en partant du haut.
• Une opacité inférieure à 100 passe la couleur en rgba : #1f5fe0 à 50 % s'écrit rgba(31, 95, 224, 0.5).

Faire des bandes nettes. Deux arrêts à la même position suppriment la transition. linear-gradient(90deg, #2b1b5a 0%, #2b1b5a 50%, #ffd3a5 50%, #ffd3a5 100%) donne deux moitiés franches, sans fondu.

Conseils pour un dégradé réussi

• Des teintes voisines pour un rendu doux. Deux couleurs proches sur le cercle chromatique se fondent bien.
• Attention au gris entre deux complémentaires. Entre le rouge #ff0000 et le cyan #00ffff, le milieu du dégradé tombe sur un gris moyen, proche de #808080. Ajoutez un arrêt intermédiaire coloré : le modèle « Corail vers turquoise » passe par un jaune sable à 50 %.
• Vérifiez la lisibilité. L'outil indique le contraste WCAG d'un texte blanc et d'un texte noir sur les deux couleurs extrêmes. Sur le dégradé de départ, le blanc obtient 5,56:1 côté bleu (« AA atteint », le seuil est 4,5:1) mais 3,90:1 côté rose.
• Préférez le CSS à une image. Une ligne de code pèse quelques dizaines d'octets et reste nette à toutes les tailles d'écran.

Les trois fonctions sont prises en charge par tous les navigateurs actuels, sans préfixe.

Questions fréquentes

Quelle différence entre background et background-image ?

background est un raccourci qui remet à zéro les autres réglages de fond. background-image ne touche qu'à l'image. Dans ce format, l'outil n'écrit la ligne background-color que si tous les arrêts sont opaques : elle se verrait à travers un dégradé transparent.

Comment mettre un dégradé sur un texte ?

Appliquez le dégradé en fond du texte, puis ajoutez background-clip: text et color: transparent. L'aperçu « Texte en dégradé » montre le résultat avec vos couleurs.

Comment faire un dégradé vers le transparent ?

Donnez la même couleur à deux arrêts et réglez l'opacité de l'un à 0. Le modèle « Voile sombre » va ainsi de 0 à 85 % : posé sur une photo, il rend lisible un titre blanc.

Mes dégradés enregistrés sont-ils envoyés quelque part ?

Non. Ils restent dans la mémoire de votre navigateur. Pour retrouver un dégradé ailleurs, copiez l'adresse de la page.