Créez des gradients CSS lineaires et radiaux avec aperçu en direct. Choisissez vos couleurs, la direction et copiez le code CSS en un clic. 100% gratuit.
Les gradients CSS permettent de créer des transitions de couleur fluides directement en CSS,
sans avoir recours à des images. Ils sont plus legers, infiniment scalables et entièrement
personnalisables. Un bon gradient peut transformer radicalement l'aspect d'un header,
d'un bouton, d'un arriere-plan ou d'un card.
Avec l'avenement du design moderne — glassmorphism, neumorphisme, dark mode colore —
les gradients sont devenus un outil de design incontournable. Des outils comme Stripe,
Linear ou Vercel utilisent des gradients sophistiques comme éléments centraux de leur identité visuelle.
Fonctionnalités
Aperçu en direct — Le gradient se met à jour instantanément à chaque modification
Gradient linéaire — 8 directions prédéfinies : droite, gauche, haut, bas et 4 diagonales
Gradient radial — Rayonnement depuis le centre en cercle parfait
Deux ou trois couleurs — Option pour ajouter une couleur intermédiaire positionnee à 50%
Sélecteurs de couleur — Roue chromatique native + saisie manuelle du code hex
Code CSS prêt à l'emploi — Compatible avec tous les navigateurs modernes, sans prefixe
Copie en un clic — Le code CSS est copie dans le presse-papiers instantanément
Questions fréquentes
Quelle est la différence entre un gradient linéaire et radial ?
Un gradient lineaire (linear-gradient) effectue une transition de couleur le long d'une ligne droite, dans une direction definie (droite, bas, diagonal, etc.). Un gradient radial (radial-gradient) part d'un point central et rayonne vers l'exterieur en cercle ou en ellipse. Les deux sont tres utilises en design web moderne.
Comment utiliser le code CSS genere dans mon projet ?
Copiez le code genere et collez-le dans votre feuille de style CSS sur la propriete background de l'element souhaite. Par exemple : .hero { background: linear-gradient(to right, #3b82f6, #8b5cf6); }. Le code est compatible avec tous les navigateurs modernes sans prefixe vendor.
Puis-je ajouter plus de deux couleurs à mon gradient ?
Oui, notre outil propose une option de couleur intermédiaire (troisième arrêt de couleur positionne à 50%). Pour des gradients encore plus complexes avec de multiples arrets, vous pouvez adapter le code CSS genere en ajoutant manuellement des couleurs supplémentaires avec leurs positions en pourcentage.
Les gradients CSS sont-ils compatibles avec tous les navigateurs ?
Oui, linear-gradient et radial-gradient sont supportes par tous les navigateurs modernes depuis 2013. Pour les tres vieux navigateurs (IE9 et inferieur), il faudrait ajouter des prefixes vendor (-webkit-, -moz-) ou utiliser un fallback en couleur unie, mais cela concerne moins de 0,1% du trafic mondial aujourd'hui.
Chaque semaine, le meilleur de la tech française
Tendances, salaires, outils et opportunités — directement dans votre boîte mail.
