Écrire la syntaxe d'un dégradé à la main est délicat : l'angle, l'ordre des points d'arrêt et les positions en pourcentage interagissent entre eux, et une simple faute de frappe casse silencieusement tout le background. Ce générateur garde l'aperçu et le code parfaitement synchronisés : ce que vous voyez est, au bit près, le CSS que vous copiez. Tout tourne côté navigateur, donc rien de ce que vous concevez n'est envoyé où que ce soit.
Générateur de dégradé CSS gratuit
Fonctionne entièrement dans votre navigateur : aucun envoi, aucune inscription.
Type
Points de couleur
Code CSS
Qu'est-ce qu'un générateur de dégradé CSS ?
Un générateur de dégradé CSS est un outil visuel qui construit le code linear-gradient(), radial-gradient() ou conic-gradient() à votre place. Choisissez vos couleurs, faites glisser les points d'arrêt, réglez l'angle et copiez le CSS prêt à coller pendant qu'un aperçu en direct montre exactement ce que le navigateur va afficher. Tout se passe dans le navigateur.
Comment l’utiliser
- 1Choisir un type de dégradé. Sélectionnez linéaire, radial ou conique. Le linéaire affiche un curseur d'angle ; le radial ajoute une forme (cercle ou ellipse) et une position ; le conique a un angle de départ et une position.
- 2Définir les points de couleur. Cliquez sur chaque pastille pour choisir une couleur et faites glisser son curseur pour déplacer le point le long du dégradé. Ajoutez jusqu'à 8 points, ou supprimez-en jusqu'à n'en garder que 2.
- 3Ajuster la direction. Faites glisser le curseur d'angle (0 à 360 degrés) ou choisissez un mot-clé de position. L'aperçu se met à jour en direct à chaque changement.
- 4Copier le CSS. Cliquez sur Copier pour récupérer la déclaration background, avec sa ligne de secours en couleur unie, et collez-la dans votre feuille de style.
Pour qui
- Les développeurs front-end qui ont besoin du fond d'un hero, d'une carte ou d'un bouton et veulent la ligne
linear-gradient()exacte sans mémoriser la syntaxe. - Les designers web et UI qui reproduisent une maquette : ils recréent le dégradé visuellement puis transmettent le CSS généré directement à l'équipe de dev.
- Les créateurs d'emails et de landing pages qui ont besoin d'une ligne de secours en couleur unie pour que le design se dégrade proprement dans les vieux clients ; la sortie l'inclut automatiquement.
- Les étudiants qui apprennent le CSS et veulent voir en temps réel comment l'angle, les points de couleur et le type de dégradé changent le rendu.
Questions fréquentes
Ce générateur de dégradé CSS est-il gratuit ?
Oui, 100 % gratuit, sans inscription, sans filigrane et sans limite. Créez autant de dégradés que vous voulez et copiez le CSS directement dans votre projet.
Quelque chose est-il envoyé à un serveur ?
Non. Le dégradé est construit et prévisualisé entièrement dans votre navigateur en JavaScript. Aucune couleur, aucun code ni aucune donnée d'usage n'est envoyé où que ce soit.
Quelle est la différence entre un dégradé linéaire, radial et conique ?
Un dégradé linéaire mélange les couleurs le long d'une ligne droite selon un angle choisi. Un dégradé radial rayonne depuis un point central en cercle ou en ellipse. Un dégradé conique fait tourner les couleurs autour d'un point central, comme une roue chromatique ou un camembert.
Comment fonctionnent les points de couleur dans un dégradé CSS ?
Chaque point associe une couleur à une position de 0 % à 100 % le long de la ligne du dégradé. Le navigateur mélange en douceur entre deux points voisins. Placer deux points à la même position crée une transition nette au lieu d'un mélange, utile pour des rayures ou un effet camembert.
Quels navigateurs prennent en charge ces dégradés ?
Tous les navigateurs modernes (Chrome, Firefox, Safari et Edge) prennent en charge linear-gradient() et radial-gradient() sans préfixe ; conic-gradient() est pris en charge partout depuis 2020. Le code copié inclut aussi une ligne de secours en couleur unie pour le reste.
Puis-je utiliser le dégradé généré comme couleur de texte ?
Pas directement : les dégradés sont des images, pas des couleurs. Appliquez le dégradé en background-image sur l'élément de texte, puis ajoutez background-clip: text et color: transparent pour que le dégradé apparaisse à travers les lettres.
Pourquoi mon dégradé montre-t-il des bandes ?
Les bandes apparaissent quand deux points éloignés se mélangent sur une longue plage de teintes proches, révélant les paliers de couleur sur 8 bits. Réduisez-les en ajoutant un point de couleur intermédiaire, en raccourcissant la distance du mélange, ou en choisissant des couleurs qui diffèrent aussi en luminosité, pas seulement en teinte.