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.

Fonctionnalités principales

  • Sélection visuelle de la direction et des couleurs avec aperçu du dégradé en temps réel
  • Prise en charge de plusieurs paliers de couleur — créez des dégradés bicolores ou multicolores complexes
  • Génère la syntaxe CSS standard linear-gradient compatible avec tous les navigateurs modernes
  • Copie en un clic dans le presse-papiers pour une intégration rapide dans vos flux de travail
  • 100 % basé sur le navigateur — aucune communication serveur ni envoi de données
  • Complète le Générateur de box-shadow CSS pour un design CSS visuel complet

Quand utiliser cet outil

  • Création de fonds dégradés pour les sections hero, bannières et en-têtes
  • Conception de boutons dégradés et d'éléments d'appel à l'action
  • Construction d'effets de superposition pour les images et les fonds vidéo
  • Expérimentation de combinaisons de couleurs avant de les intégrer au code
  • Apprentissage de la syntaxe des dégradés CSS par l'expérimentation visuelle

Détails techniques

L'outil génère une valeur CSS linear-gradient() avec la direction et les paliers de couleur sélectionnés. Les directions peuvent être des mots-clés (to top, to right, to bottom left) ou des angles en degrés. Chaque palier de couleur peut optionnellement inclure une position en pourcentage. La sortie est du CSS standard fonctionnant dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) sans préfixes vendeur. Pour les dégradés radiaux ou coniques, vous devrez modifier la sortie manuellement. L'aperçu affiche le dégradé sur un élément div en utilisant le CSS exact que vous copiez.

Conclusion

Le Générateur de dégradé CSS est un outil visuel et intuitif pour créer de superbes dégradés linéaires sans écrire de CSS à la main. Il produit du code compatible avec les navigateurs en un clic — parfait pour les designers et développeurs qui veulent des dégradés parfaits au pixel près sans tâtonnement.

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.
Puis-je créer des dégradés radiaux ou coniques ?
Cet outil se concentre sur les dégradés linéaires. Pour les dégradés radiaux ou coniques, vous pouvez modifier la sortie générée en remplaçant linear-gradient par radial-gradient ou conic-gradient et en ajustant les paramètres.