Générateur de Dégradés
Le générateur de dégradé CSS crée des dégradés linéaires, radiaux et coniques à partir de deux ou trois couleurs, avec un aperçu en direct et un CSS background prêt à copier.
À propos de cet outil
Le générateur de dégradé CSS crée des dégradés linéaires, radiaux et coniques à partir de deux ou trois couleurs, avec un aperçu en direct et un CSS background prêt à copier.
Mode d’emploi
- Choisissez le type de dégradé : linéaire, radial ou conique.
- Réglez l’angle avec le curseur (0–360°).
- Choisissez deux couleurs, ou cochez Utiliser 3 couleurs pour en ajouter une troisième.
- Cliquez sur Copier le CSS et collez la règle background dans votre feuille de style.
Bon à savoir
- linear-gradient() fond les couleurs le long d’une ligne droite définie par un angle ; 90deg va de gauche à droite.
- radial-gradient(circle, …) diffuse les couleurs du centre vers l’extérieur.
- conic-gradient(from <angle>, …) fait tourner les couleurs autour d’un point central, pratique pour les graphiques en secteurs et les cercles chromatiques.
- Les dégradés CSS sont des images générées par le navigateur : ils s’adaptent à toutes les tailles sans alourdir la page.
- Les trois fonctions de dégradé sont prises en charge par tous les grands navigateurs actuels.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment créer un dégradé CSS ?
Utilisez une fonction de dégradé comme arrière-plan, par exemple background: linear-gradient(135deg, #1db954, #0a1628). Cet outil écrit cette ligne pour vous à partir des couleurs et de l’angle choisis.
Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires changent de couleur le long d’une ligne, les radiaux rayonnent depuis un point central et les coniques tournent autour d’un centre comme les aiguilles d’une horloge.
Un dégradé peut-il avoir plus de deux couleurs ?
Oui. Les dégradés CSS acceptent autant d’arrêts de couleur que vous le souhaitez. Ce générateur en gère deux ou trois ; vous pouvez en ajouter à la main dans le CSS copié.
Les dégradés CSS ralentissent-ils un site ?
Pas de manière perceptible. Ils sont dessinés par le navigateur et n’exigent aucun téléchargement d’image : ils sont donc généralement plus légers que des images de dégradé.