Générateur de dégradé CSS
Créer un dégradé CSS linéaire ou radial avec plusieurs couleurs et positions, l’angle voulu et des modèles prêts à l’emploi, puis copier le code.
background: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);background-image: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);bg-[linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)]Les couleurs sont assemblées dans le navigateur, sans envoi. L’outil aide à concevoir un site, une page d’accueil ou un système de design, mais ne vérifie pas le contraste avec le texte et ne dit rien de l’accessibilité : utilisez pour cela le vérificateur de contraste.
Essayer un autre outil
Une sélection pour compléter cet outilCe générateur crée un dégradé CSS, linéaire ou radial, avec autant d’arrêts de couleur que nécessaire. On règle l’angle d’un dégradé linéaire, la couleur et la position de chaque arrêt, on part d’un modèle ou d’un tirage aléatoire, et l’aperçu se met à jour en direct. Le code CSS correspondant, avec linear-gradient() ou radial-gradient(), se copie en un clic pour l’arrière-plan d’une section, d’un bouton ou d’une bannière.
Comment utiliser cet outil
- 01Choisir le typeLinéaire, avec un angle, ou radial, du centre vers les bords.
- 02Régler les couleursModifiez la couleur et la position de chaque arrêt, ajoutez-en ou supprimez-en.
- 03Copier le CSSCopiez le code et collez-le dans la propriété background de votre feuille de style.
Dans quels cas est-ce utile ?
- Design webCréer des arrière-plans de sections, de cartes et de bannières.
- Boutons et éléments d’interfaceDonner du relief aux boutons et aux en-têtes.
- VisuelsPréparer des fonds pour les réseaux sociaux ou des présentations.
Exemples
- Un fond de sectionlinear-gradient(135deg, #667EEA 0%, #764BA2 100%) donne un dégradé bleu-violet en diagonale.
- Un boutonDeux tons proches d’une même couleur, à 90°, donnent du relief sans surcharger.
- Un haloUn dégradé radial d’une couleur claire vers le fond crée un effet de lumière au centre.
Conseils pour un meilleur résultat
- Des couleurs voisinesDeux couleurs proches sur le cercle chromatique donnent un dégradé plus doux qu’un passage entre couleurs opposées.
- Le texte par-dessusVérifiez la lisibilité du texte sur la partie la plus claire et sur la plus foncée du dégradé.
- Prévoir une couleur unieAjoutez une couleur de fond unie avant le dégradé dans le CSS, utilisée si l’image ne s’affiche pas.
Dégradé linéaire
linear-gradient() fait varier les couleurs le long d’une ligne. L’angle se mesure en degrés : 0deg va de bas en haut, 90deg de gauche à droite, 180deg de haut en bas.
Dégradé radial et arrêts
radial-gradient() part du centre vers les bords. Chaque arrêt associe une couleur à une position en pourcentage ; entre deux arrêts, le navigateur calcule la transition.
Compatibilité et confidentialité
Les dégradés CSS sont pris en charge par tous les navigateurs actuels, sans préfixe. L’outil fonctionne dans le navigateur, sans envoi.
Questions fréquentes
Comment faire un dégradé en CSS ?
Utilisez background: linear-gradient(angle, couleur1, couleur2) ; l’outil génère le code exact.
Combien de couleurs peut-on mettre ?
Autant d’arrêts que voulu ; deux ou trois suffisent le plus souvent.
Quelle différence entre linéaire et radial ?
Le linéaire suit une direction ; le radial rayonne depuis un point central.
Le dégradé fonctionne-t-il sur tous les navigateurs ?
Oui, sur tous les navigateurs actuels.
Puis-je utiliser le dégradé sur du texte ?
Oui, en CSS avec background-clip: text et une couleur de texte transparente ; vérifiez alors la lisibilité.
Mes réglages sont-ils enregistrés ?
Non, tout reste dans le navigateur.
Comment faire un dégradé transparent ?
Utilisez une couleur avec transparence comme dernier arrêt, par exemple rgba(0, 0, 0, 0) : le dégradé s’estompe alors vers le fond.