Générateur de Dégradé
Créez visuellement des dégradés CSS linéaires et radiaux, puis copiez le code CSS.
100 % confidentiel — tout fonctionne dans votre navigateur
Mode d'emploi
- 1
Choisissez Linéaire ou Radial — les dégradés linéaires acceptent un angle de 0° à 360°.
- 2
Choisissez la couleur de chaque arrêt et faites glisser son curseur pour régler la position (0–100 %).
- 3
Ajoutez jusqu'à huit arrêts, ou supprimez ceux dont vous n'avez pas besoin.
- 4
Copiez le CSS généré et collez-le dans votre feuille de style.
Exemples
Bleu vers violet (par défaut)
Entrée
Linéaire · 135° · #3B82F6 0% → #8B5CF6 100%Résultat
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);Radial à trois arrêts
Entrée
Radial · #F59E0B → #EF4444 → #8B5CF6Résultat
background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);Questions fréquentes
Quelle différence entre dégradé linéaire et radial ?
Un dégradé linéaire mélange les couleurs le long d'une ligne selon l'angle choisi ; un dégradé radial rayonne depuis le centre.
Quels navigateurs prennent en charge le CSS généré ?
Tous les navigateurs modernes prennent en charge linear-gradient() et radial-gradient() standards — aucun préfixe vendeur n'est nécessaire.
Combien d'arrêts de couleur puis-je utiliser ?
Jusqu'à huit. Chaque arrêt a sa propre couleur et un curseur de position de 0 % à 100 %.