Générateur de dégradés CSS
Concevez des fonds en dégradé en faisant glisser des arrêts de couleur sur une barre, choisissez le type (linéaire, radial ou conique) et copiez un CSS prêt pour la production, avec couleur de repli et version moderne en OKLCH sans zones grises.
Traité à 100 % dans votre navigateur
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Choisissez le type de dégradé et réglez l’angle ou le centre.
- 2Faites glisser les arrêts sur la barre ; cliquez sur la barre pour en ajouter un.
- 3Sélectionnez un arrêt pour modifier sa couleur ou sa position exacte.
- 4Copiez le CSS ou partagez un lien vers votre dégradé.
Cas d’usage
- Fonds de sections hero, de cartes et de boutons.
- Superpositions de couleur sur des images.
- Graphiques circulaires et roues chromatiques avec conic-gradient.
- Tester des combinaisons de marque avant de les passer dans Figma ou le code.
Questions fréquentes
Quelle différence entre dégradé linéaire, radial et conique ?
Le linéaire progresse en ligne droite selon un angle ; le radial s’étend depuis un centre en cercle ou en ellipse ; le conique tourne autour d’un point comme les aiguilles d’une montre, idéal pour les camemberts.
Qu’apporte l’interpolation en OKLCH ?
En mélangeant les couleurs en sRGB, le milieu de certains dégradés (du bleu au jaune par exemple) devient grisâtre. En OKLCH, la transition reste vive. Le CSS contient une ligne sRGB de repli pour les anciens navigateurs.
Faut-il des préfixes comme -webkit- ?
Non. linear-gradient, radial-gradient et conic-gradient fonctionnent sans préfixe dans tous les navigateurs actuels. Une couleur unie de repli est aussi incluse.
Puis-je partager ou sauvegarder un dégradé ?
Oui. Les réglages sont dans l’URL : copiez le lien avec « Partager » et toute personne qui l’ouvre verra exactement le même dégradé.