Générateur Dégradé CSS
Créez des dégradés CSS linéaires ou radiaux avec prévisualisation en temps réel.
Presets populaires
Code CSS
background: linear-gradient(135deg, #6366f1, #8b5cf6);
Questions fréquentes
Qu'est-ce qu'un dégradé CSS ?
Un dégradé CSS (gradient) est une transition progressive entre deux couleurs ou plus, générée directement par le navigateur sans image. Il existe deux types principaux : le dégradé linéaire (linear-gradient), qui suit une direction, et le dégradé radial (radial-gradient), qui rayonne depuis un centre.
Quelle est la différence entre dégradé linéaire et radial ?
Un dégradé linéaire (linear-gradient) transite dans une direction définie par un angle (0° = vers le haut, 90° = vers la droite). Un dégradé radial (radial-gradient) rayonne depuis le centre vers l'extérieur, créant un effet circulaire ou elliptique.
Comment utiliser le CSS généré dans mon projet ?
Copiez le code CSS généré et appliquez-le à n'importe quel élément HTML via la propriété background ou background-image. Par exemple : .mon-element { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); }.
Compatible avec tous les navigateurs modernes sans préfixes vendeur.
Puis-je utiliser des dégradés CSS sur du texte ?
Oui ! Pour appliquer un dégradé sur du texte, utilisez : background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;.
Cela crée un effet de texte dégradé moderne très populaire.
Les dégradés CSS affectent-ils les performances ?
Non, les dégradés CSS sont générés par le GPU et sont très performants — bien plus que des images PNG ou JPG. Ils s'adaptent à toutes les résolutions (retina inclus) et réduisent le nombre de requêtes HTTP.
Découvrez nos autres outils pour développeurs :
Dégradés CSS générés côté client. Compatible avec tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Pas de préfixes vendeur nécessaires pour les navigateurs récents.