Générateur de dégradé CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Pourquoi utiliser un générateur de dégradé visuel ?
Écrire des dégradés CSS à la main est fastidieux — mémoriser la syntaxe de linear-gradient(), radial-gradient() et conic-gradient() avec plusieurs arrêts de couleur et positions est source d'erreurs. Notre générateur visuel vous permet de gérer les arrêts de couleur avec des sélecteurs et des curseurs de position, avec un aperçu en direct qui se met à jour instantanément, rendant la création de dégradés rapide et intuitive.
3 types de dégradés
Dégradés linéaires, radiaux et coniques tous supportés avec des contrôles spécifiques à chaque type
Dégradés multi-arrêts
Ajoutez un nombre illimité d'arrêts de couleur et faites glisser leurs positions pour créer des dégradés multicolores complexes
Aperçu en direct
Voyez votre dégradé rendu en temps réel à mesure que vous ajustez les couleurs, positions et l'angle
Comment créer un dégradé CSS
Choisissez le type de dégradé
Sélectionnez un dégradé linéaire, radial ou conique et définissez l'angle ou la direction
Configurez les arrêts de couleur
Utilisez les sélecteurs pour définir la couleur de chaque arrêt, et faites glisser les curseurs pour les positionner
Copiez le CSS
Cliquez sur 'Copier le CSS' pour obtenir la propriété background complète prête pour votre feuille de style
Cas d'utilisation des dégradés CSS
Arrière-plans héros
Créez de superbes arrière-plans de pages entières avec des dégradés diagonaux ou radiaux
Texte dégradé
Appliquez des dégradés au texte avec background-clip: text pour des effets typographiques saisissants
Bordures dégradées
Utilisez des dégradés avec border-image pour créer des bordures colorées sur les éléments
Surimpressions d'images
Superposez des dégradés sur des images pour créer des surimpressions sombres permettant la lisibilité du texte
Bonnes pratiques pour les dégradés CSS
✓ Utilisez 135deg pour les dégradés diagonaux
Un angle de 135 degrés crée une diagonale classique de haut-gauche à bas-droite qui semble naturelle et dynamique — un choix populaire pour les sections héros.
✓ Gardez les dégradés subtils pour l'interface
Pour les éléments d'interface (boutons, cartes), utilisez des dégradés très subtils de la même teinte avec 10-20% de différence de luminosité pour ajouter de la profondeur sans bruit visuel.
✓ Fournissez une couleur de secours
Ajoutez une background-color solide avant votre dégradé comme solution de secours : background-color: #6366f1; background: linear-gradient(...).
✓ Animez la position du dégradé
Les dégradés CSS ne peuvent pas être animés directement, mais vous pouvez animer background-position sur un dégradé plus grand pour créer un effet fluide.
❓ Foire aux questions
Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires effectuent la transition le long d'une ligne droite à un angle. Les dégradés radiaux rayonnent vers l'extérieur depuis un point central en cercles ou ellipses. Les dégradés coniques tournent autour d'un point central comme un graphique circulaire — idéal pour les anneaux de progression et les roues chromatiques.
Comment créer un dégradé transparent ?
Utilisez transparent comme arrêt de couleur : linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Cela crée un dégradé d'une couleur semi-opaque vers entièrement transparent — parfait pour les surimpressions d'images.
Pourquoi mon dégradé présente-t-il des bandes ou des rayures ?
Les bandes (rayures visibles entre les couleurs) apparaissent sur les écrans de mauvaise qualité ou lors de transitions sur des teintes similaires. Ajoutez un arrêt de couleur intermédiaire à une teinte complémentaire pour lisser la transition.
Puis-je utiliser des dégradés comme bordures ?
Oui, utilisez border-image: linear-gradient(...) 1. Cela définit le dégradé comme image de bordure. Alternativement, utilisez un pseudo-élément ::before avec un arrière-plan dégradé et un z-index négatif pour simuler une bordure dégradée.