Syntaxe conic-gradient
background: conic-gradient(from 0deg at 50% 50%,
#ff0000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff,
#ff0000
);
Paramètre from
from décale l’angle de départ. C’est utile pour aligner une séparation de couleurs, orienter un indicateur circulaire ou synchroniser un dégradé avec une animation.
Créer des secteurs nets
Deux stops à la même position créent une coupure franche. Cette technique permet de fabriquer des camemberts CSS sans SVG.
background: conic-gradient(#22c55e 0 35%, #f59e0b 35% 70%, #ef4444 70% 100%);
Usage en bordure
Un conic-gradient placé derrière une carte peut produire une bordure multicolore. Combinez-le avec un fond interne ou un pseudo-élément pour garder le contenu lisible.