Générateur de Dégradés CSS

Ajustez les couleurs et la direction pour générer un code CSS background-image compatible avec tous les navigateurs.

Code CSS

                        /* Fallback pour anciens navigateurs */
                        background-color: {{ color1 }};

                        /* Dégradé CSS3 */
                        background-image: {{ gradientStyle }};

Paramètres

Type de dégradé

Linéaire

Radial

Couleurs

Angle / Direction {{ angle }}°

Qu'est-ce qu'un Dégradé CSS (CSS Gradient) ?

Un dégradé CSS permet d'afficher une transition fluide entre deux ou plusieurs couleurs. Contrairement à une image créée sur Photoshop ou Figma, le dégradé CSS est généré dynamiquement par le navigateur. C'est l'une des techniques de web design les plus performantes, car elle ne requiert aucune requête HTTP (pas d'image à télécharger) et s'adapte parfaitement à toutes les résolutions d'écran sans perte de qualité.

Différence entre Linear-Gradient et Radial-Gradient

Linear-Gradient (Linéaire) : Les couleurs se fondent le long d'une ligne droite. Vous pouvez contrôler la direction de cette ligne via un angle en degrés (ex: 90deg pour aller de gauche à droite) ou des mots-clés (ex: to right bottom).
Radial-Gradient (Radial) : Les couleurs partent d'un point central et s'étendent vers l'extérieur en formant un cercle ou une ellipse, simulant souvent une source de lumière (effet de halo).

Pourquoi inclure un "Fallback" de couleur ?

Notre générateur vous fournit une ligne background-color avant de déclarer l'image du dégradé. Cette pratique (appelée Fallback) garantit que si l'utilisateur visite votre site avec un navigateur très ancien (ou un lecteur d'email qui ne supporte pas CSS3), il verra au moins la couleur principale plutôt qu'un fond transparent qui pourrait rendre votre texte illisible.

D'autres outils Design :

Convertisseur HEX/RGB

Générateur d'Ombres

Testeur Contraste

Mode d’emploi

Comment utiliser Générateur de dégradés CSS ?

Créez des dégradés linéaires ou radiaux et copiez le code CSS prêt à l’emploi.

Choisissez les couleurs

Ajoutez et placez les points de couleur.
Réglez l’angle

Type, direction et positions.
Copiez le résultat

Copiez ou téléchargez le résultat en un clic.

GratuitAucun abonnement, aucune limite cachée.

Sans inscriptionOuvrez la page, utilisez l’outil, c’est tout.

InstantanéRésultat en quelques secondes, même sur mobile.

ConfidentielLe traitement se fait dans votre navigateur.

En savoir plus : Générateur de dégradés CSS

Les dégradés CSS remplacent avantageusement des images : plus légers, nets à toutes les tailles et modifiables à tout moment.

générateur dégradé css css gradient linear-gradient radial-gradient dégradé de couleurs

FAQ

Questions fréquentes sur Générateur de dégradés CSS

Linéaire ou radial ?

Linéaire suit une direction ; radial part d’un centre vers l’extérieur.

Le code est-il compatible ?

Oui, avec tous les navigateurs modernes.

Puis-je ajouter plus de deux couleurs ?

Oui, autant que vous le souhaitez.

Comment l’utiliser en fond ?

Collez le code dans la propriété background de votre élément.

Outils web design associés

Voir les autres outils gratuits