Un gradient linéaire change de couleur le long d’un axe, un radial s’étend depuis un centre et un conique tourne autour de ce centre. Choisissez d’abord la géométrie : deux couleurs peuvent former une bande, un halo ou un balayage.
Un axe ou une distance au centre
Dans linear-gradient(), 0deg pointe vers le haut, 90deg vers la droite et 180deg vers le bas ; les couleurs progressent du premier au dernier point dans cette direction. radial-gradient(ellipse at 50% 50%, ...) part du centre du bloc vers l’ellipse finale. Le centre dépend de la largeur et de la hauteur : 25% 50% le déplace à gauche sans rotation.
Le gradient conique suit un angle, pas un rayon
Dans conic-gradient(from 0deg at 50% 50%, ...), le départ est au-dessus du centre et les couleurs avancent dans le sens horaire. Un point à 25% représente un quart de tour, pas du rayon. Passer de from 0deg à from 90deg tourne le départ. Des couleurs extrêmes différentes créent une jonction visible ; les faire coïncider ferme la boucle.
Vérifiez la déclaration dans son contexte réel
Gardez un background-color de repli et enregistrez le CSS avant de recharger : les palettes ne sont pas conservées. Testez les navigateurs et dimensions visés. Vérifiez le contraste sur tout le gradient visible, pas en un point ; l’aperçu ne certifie ni accessibilité ni compatibilité.