Syntaxe de base
Un dégradé linéaire demande au minimum deux couleurs. La direction peut être un mot-clé ou un angle.
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Comprendre les angles
En CSS, 0deg va du bas vers le haut, 90deg de gauche à droite, 180deg de haut en bas et 270deg de droite à gauche. Les valeurs augmentent dans le sens horaire.
Pour les mises en page responsives, les mots-clés comme
to bottom right restent souvent plus prévisibles que les angles absolus.Ajouter plusieurs points de couleur
Chaque couleur peut recevoir une position en pourcentage ou en longueur. Cela permet de contrôler la zone occupée par chaque teinte.
background: linear-gradient(135deg,
#f6d365 0%,
#fda085 40%,
#f093fb 70%,
#c471ed 100%
);
Dégradés répétés et bandes nettes
repeating-linear-gradient() répète un motif. Deux stops à la même position créent une séparation nette, utile pour des rayures ou des fonds techniques.
background: repeating-linear-gradient(45deg,
#667eea 0 10px,
#764ba2 10px 20px
);