CSS Visual Directory
Conic Gradient
Colour sweeping around a centre point like a pie chart or a colour wheel.
Edit Conic Gradient
Change any value to see it update live.
About this entry
What it is
Colour sweeping around a centre point like a pie chart or a colour wheel.
Progress rings, colour pickers and decorative discs, usually with a border radius.
Copy & use
How to copy and use conic gradient
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Progress rings, colour pickers and decorative discs, usually with a border radius.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Sweeps colour around a centre point rather than outward from it, which is what makes pie charts and colour wheels possible in pure CSS.
from 210deg- Starting angle for the sweep.
#7f5af0- The first colour — repeated at the end so the loop closes seamlessly.
#2cb67d- An intermediate stop; each stop occupies an equal arc unless positioned.
Making it yours
How to adjust conic gradient
Repeat the first colour as the last stop or the wheel shows a hard seam. Give stops explicit percentages to turn the sweep into distinct segments rather than a blend.
Worth knowing before you ship it
Almost always wants a border-radius of 50 percent — in a square box the sweep looks like a folded ribbon rather than a wheel.
Common questions
Using conic gradient
What is conic gradient?
Colour sweeping around a centre point like a pie chart or a colour wheel. Progress rings, colour pickers and decorative discs, usually with a border radius.
Where do I put the conic gradient CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Progress rings, colour pickers and decorative discs, usually with a border radius. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will conic gradient work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise conic gradient after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing