Syntaxe radial-gradient
La syntaxe combine une forme, une taille, une position et des stops de couleur.
background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%);
Circle ou ellipse
circle garde un rayon identique dans toutes les directions. ellipse suit les proportions du bloc, ce qui donne un rendu plus naturel pour les cartes, héros et sections larges.
Positionner le centre
Le mot-clé at déplace le centre : at top left, at 80% 20% ou même une position hors cadre pour un halo partiel.
background: radial-gradient(circle at 20% 30%, #fff8, transparent 60%), #111827;
Tailles closest-side et farthest-corner
farthest-corner est le comportement courant : le rayon atteint le coin le plus éloigné. closest-side crée une zone plus concentrée, pratique pour des spots lumineux ou des effets focalisés.