Générateur de dégradés CSS
Choisissez le type de dégradé, déplacez les arrêts de couleur et copiez le CSS. L'aperçu se met à jour immédiatement et rien ne quitte votre navigateur.
À propos de cet outil
Un dégradé CSS est une image que le navigateur peint à partir d'arrêts de couleur : il s'adapte donc à toute taille d'élément sans télécharger de fichier. Le dégradé linéaire suit un angle, le radial se propage depuis un centre et le conique tourne autour de ce centre, pratique pour les anneaux et les roues chromatiques.
Les positions des arrêts sont des pourcentages le long de ce parcours. Deux arrêts à la même position créent une frontière nette plutôt qu'un fondu : c'est ainsi que l'on obtient les rayures et les fonds bicolores. Tous les navigateurs sortis depuis 2016 acceptent les trois fonctions sans préfixe.
Questions fréquentes
- Que signifie l'angle ?
- 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas. C'est la direction dans laquelle le dégradé avance, pas celle d'où il vient.
- Comment obtenir une frontière nette plutôt qu'un fondu ?
- Donnez la même position à deux arrêts, par exemple rouge 50 % et bleu 50 %. La couleur change alors sans transition.
- Puis-je appliquer un dégradé au texte ?
- Oui : mettez le dégradé en background, puis ajoutez background-clip: text et color: transparent sur le même élément.