Générateur de dégradés CSS
Concevez des dégradés CSS visuellement et copiez le code.
Prochaines étapes recommandées
Outils associés
Convertissez des couleurs entre HEX, RGB et HSL, et vérifiez le contraste WCAG.
Testez une expression régulière sur du texte et voyez les correspondances et les groupes de capture.
Créez un QR code à partir de n'importe quel texte ou lien et téléchargez-le en PNG ou SVG.
Questions fréquentes
Il génère une déclaration background prête à coller utilisant la fonction standard linear-gradient() ou radial-gradient() — par exemple background: linear-gradient(90deg, #1a6741 0%, #7ed957 100%);. Copiez-la directement dans votre feuille de style ou un attribut style en ligne.
Utilisez le bouton Ajouter un point de couleur pour insérer des points supplémentaires, puis définissez la couleur de chaque point et sa position de 0 % à 100 %. L'outil trie les points par position automatiquement, vous pouvez donc les ajouter dans n'importe quel ordre et le CSS généré reste cohérent.
L'angle définit la direction dans laquelle les couleurs se fondent. 0deg oriente le dégradé vers le haut, 90deg vers la droite et 180deg vers le bas. Faites glisser le curseur d'angle pour faire pivoter le dégradé et observez la mise à jour de l'aperçu en direct.
Non. Le dégradé est construit entièrement dans votre navigateur avec du CSS simple : aucun envoi, aucun compte et rien ne quitte cette page. Vous pouvez l'utiliser hors ligne une fois la page chargée.
Dernière mise à jour le 2026-06-23.