Générateur de dégradé CSS

Créer du CSS linear-gradient à partir des couleurs et de la direction.

Développeur

Choisissez les couleurs et la direction pour générer un linear-gradient CSS. L'aperçu se met à jour en direct. Copiez le CSS une fois terminé. S'exécute dans votre navigateur.

0%
100% 
background: linear-gradient(to right, #3b82f6, #8b5cf6);

À propos du Générateur de dégradé CSS

Cet outil construit un linear-gradient CSS à partir de la direction et des couleurs choisies. Vous pouvez ajouter plusieurs paliers de couleur. L'aperçu et le CSS se mettent à jour lorsque vous modifiez les options. Copiez l'extrait dans votre feuille de style.

Comment utiliser

  1. Sélectionnez la direction (ex. vers la droite, 45deg).
  2. Choisissez les couleurs avec le sélecteur ou saisissez le code hex. Ajoutez d'autres couleurs si besoin.
  3. Copiez le CSS généré et collez-le dans votre projet.

Questions fréquentes

Puis-je ajouter plus de deux couleurs ?
Oui. Utilisez Ajouter une couleur pour ajouter des paliers. Vous pouvez les réordonner ou les supprimer. Chaque palier peut avoir une position (ex. 50 %).
Mon dégradé est-il envoyé à un serveur ?
Non. Le CSS est construit dans votre navigateur.
Quels navigateurs prennent en charge linear-gradient ?
Tous les navigateurs modernes prennent en charge linear-gradient. L'outil produit du CSS standard ; ajoutez des préfixes vendeur si vous avez besoin d'un support plus ancien.