Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Déplacez les points de couleur, ajustez l'angle et copiez le CSS en un clic. Tout fonctionne dans votre navigateur, sans upload ni compte.
Aucun dégradé enregistré pour l’instant.
Pourquoi utiliser ce générateur ?
Tous les types de dégradés
Dégradés linéaires, radiaux et coniques avec points de couleur illimités et options CSS complètes.
Aperçu instantané
Aperçu live et barre de dégradé manipulable — chaque changement est visible immédiatement.
Sauvegarde et export
Sauvegardez localement, exportez en PNG et copiez le CSS en un clic.
Gratuit, sans compte
Pas d’inscription, pas d’upload, pas de publicité. Tout reste dans votre navigateur.
Questions fréquentes
Quelle différence entre un dégradé linéaire, radial et conique ?
Un linear-gradient fait évoluer les couleurs sur une ligne. Un radial-gradient part d’un centre en cercle ou ellipse. Un conic-gradient tourne autour d’un point comme une roue ou un camembert.
Comment ajouter de la transparence à un dégradé CSS ?
Utilisez rgba(), hsla() ou un hex à 8 chiffres dans vos stops. Par exemple #667eea80 correspond à environ 50% d’opacité. Le damier de l’aperçu signale la transparence.
Faut-il le préfixe -webkit- ?
Les navigateurs modernes supportent les dégradés CSS sans préfixe. Activez -webkit- seulement pour de très anciens navigateurs mobiles.
Comment utiliser un dégradé CSS en arrière-plan ?
Collez le CSS généré dans votre feuille de style. Utilisez background: linear-gradient(...); sur un élément, ou min-height: 100vh sur le body pour couvrir toute la fenêtre.
Peut-on appliquer un dégradé à du texte ?
Oui : appliquez le dégradé en background, puis utilisez -webkit-background-clip: text, -webkit-text-fill-color: transparent et background-clip: text.