À propos : Générateur de dégradé CSS
Un dégradé CSS (gradient) fait passer en douceur deux couleurs ou plus, sans fichier image, uniquement avec du CSS. On l’utilise pour les boutons, bannières et fonds de cartes : il est plus léger qu’une image et reste net quelle que soit la taille de l’écran.
Dans ce générateur, faites tourner le cadran d’angle ou glisser les points de couleur : l’aperçu et le code linear-gradient, radial-gradient ou conic-gradient changent en même temps.
Mode d’emploi
- Choisissez le type de dégradé : Linéaire, Radial ou Conique.
- Pour un dégradé linéaire ou conique, tournez le cadran ou utilisez le curseur ou le champ numérique pour l’angle. Pour un dégradé radial, choisissez la forme et la position du centre.
- Faites glisser les ronds de la barre pour déplacer les couleurs, puis touchez un espace vide ou + Couleur pour en ajouter. Vous pouvez aussi saisir couleur et position (%) exactes dans la liste.
- Quand le résultat vous plaît, touchez Copier le CSS et collez-le dans votre feuille de style.
Types de dégradé et syntaxe
| Type | Exemple de code |
|---|---|
| Linéaire | linear-gradient(90deg, #4f46e5 0%, #22c1c3 100%) |
| Radial | radial-gradient(circle at center, #fff 0%, #000 100%) |
| Conique | conic-gradient(from 0deg at center, red, yellow, red) |
Dans un dégradé linéaire, 0deg va du bas vers le haut (↑), 90deg de gauche à droite (→) et 180deg du haut vers le bas (↓). Le pourcentage après une couleur indique l’endroit où elle apparaît pure. Placez deux couleurs à la même position pour obtenir une limite nette, ce qui permet de créer des rayures.
Conseils de design
- Deux couleurs complémentaires très saturées donnent souvent un gris terne au milieu. Choisissez des couleurs proches sur le cercle chromatique ou ajoutez une couleur plus claire entre les deux.
- Si du texte est posé sur un dégradé, vérifiez qu’il reste lisible sur la partie la plus claire comme sur la plus foncée. Le contrôle de contraste du convertisseur de couleurs peut vous aider.
- La première ligne background: couleur unie; sert de solution de repli pour les très vieux navigateurs.
Questions fréquentes
Est-ce compatible avec tous les navigateurs ?
linear-gradient et radial-gradient fonctionnent sans préfixe -webkit- dans tous les navigateurs récents. conic-gradient est pris en charge à partir de Chrome 69, Safari 12.1 et Firefox 83.
Peut-on appliquer un dégradé à du texte ?
Oui. Ajoutez au code background copié background-clip: text; -webkit-background-clip: text; color: transparent; : le texte prend alors le dégradé.
Combien de couleurs peut-on ajouter ?
Cet outil accepte jusqu’à 12 points de couleur. Le CSS lui-même n’impose aucune limite.