Creez des gradients CSS lineaires et radiaux avec apercu en direct. Choisissez vos couleurs, la direction et copiez le code CSS en un clic. 100% gratuit.
Les gradients CSS permettent de creer des transitions de couleur fluides directement en CSS,
sans avoir recours a des images. Ils sont plus legers, infiniment scalables et entierement
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 elements centraux de leur identite visuelle.
Fonctionnalites
Apercu en direct — Le gradient se met a jour instantanement a chaque modification
Gradient lineaire — 8 directions predefinies : 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 intermediaire positionnee a 50%
Selecteurs de couleur — Roue chromatique native + saisie manuelle du code hex
Code CSS pret a l'emploi — Compatible avec tous les navigateurs modernes, sans prefixe
Copie en un clic — Le code CSS est copie dans le presse-papiers instantanement
Questions frequentes
Quelle est la difference entre un gradient lineaire 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 a mon gradient ?
Oui, notre outil propose une option de couleur intermediaire (troisieme arret de couleur positionne a 50%). Pour des gradients encore plus complexes avec de multiples arrets, vous pouvez adapter le code CSS genere en ajoutant manuellement des couleurs supplementaires 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 francaise
Tendances, salaires, outils et opportunites — directement dans votre boite mail.
