Générateur de dégradés CSS
Générez des dégradés CSS.
À propos de cet outil
L’outil compose un dégradé linéaire à deux arrêts, l’affiche en aperçu et laisse copier soit le CSS brut, soit une classe de fond arbitraire Tailwind.
Comment l’utiliser
Réglez les deux couleurs et l’angle, générez la bande, vérifiez le rendu, puis copiez la déclaration background ou la classe bg-[linear-gradient(…)].
Exemple
Les valeurs par défaut donnent un lavis diagonal du bleu ciel vers le vert.
Entrée
135deg · #0ea5e9 → #22c55eSortie
background: linear-gradient(135deg, #0ea5e9, #22c55e);Conseil
Les dégradés de marque à plusieurs arrêts restent plus maintenables dans des variables CSS.
Bon à savoir
Puis-je ajouter plus de deux arrêts de couleur ?
Ce générateur crée un dégradé linéaire à deux arrêts. Pour des dégradés de marque à plusieurs arrêts, copiez le résultat et ajoutez les arrêts à la main, ou gardez-les dans des variables CSS.
Comment utiliser la sortie Tailwind ?
Collez la classe bg-[linear-gradient(…)] sur un élément. Tailwind la lit comme valeur arbitraire, aucun changement de configuration n'est nécessaire.