Générateur de dégradé CSS
Construisez un dégradé visuellement et copiez le CSS.
- Fonctionne dans votre navigateur — votre texte n'est jamais envoyé nulle part
- Sans inscription, sans quota, gratuit et utilisable aussi souvent que vous le souhaitez
Comment ça marche
Les dégradés s'écrivent en CSS dans une seule déclaration dont la syntaxe est facile à mal retenir, surtout la convention d'angle et la position des arrêts de couleur. Voir le résultat pendant qu'on ajuste est plus rapide que de recharger une page pour vérifier.
La convention d'angle piège les gens
En CSS, 0 degré pointe vers le haut et l'angle augmente dans le sens horaire, donc 90 degrés va de gauche à droite et 180 degrés de haut en bas. C'est différent de la convention mathématique et de plusieurs outils de design, ce qui explique pourquoi un dégradé copié d'ailleurs ressort souvent pivoté.
Les trois types
Le linéaire suit une ligne droite et couvre presque tous les usages réels. Le radial se propage vers l'extérieur à partir d'un point, ce qui convient aux lueurs et aux projecteurs. Le conique balaie autour d'un centre et sert à construire les camemberts et les roues chromatiques.
Un dégradé est une image, pas une couleur
C'est l'autre chose qui piège les gens. CSS traite un dégradé comme une image d'arrière-plan, donc il fonctionne dans background et background-image mais pas dans color, border-color ni nulle part ailleurs où l'on attend une couleur simple. Les dégradés de texte demandent background-clip, qui est une technique distincte.
Ajouter une couleur intermédiaire
Deux arrêts donnent un fondu net. Un troisième permet de faire passer la transition par une autre teinte, ce qui évite le gris boueux qui apparaît quand deux couleurs opposées se mélangent directement.
Générateur de dégradé CSS : questions
Dans quel sens va l'angle§?
0 degré pointe vers le haut et les angles augmentent dans le sens horaire, donc 90 degrés va de gauche à droite.
Pourquoi mon dégradé ne fonctionne-t-il pas sur du texte§?
Un dégradé est une image d'arrière-plan, pas une couleur. Les dégradés de texte demandent background-clip comme étape distincte.
Quand utiliser un dégradé radial ou conique§?
Radial pour les lueurs et les projecteurs, conique pour les effets de camembert et de roue chromatique. Le linéaire couvre la plupart des autres cas.