Gradient guide
About this conic gradient generator
Create a conic CSS gradient
A conic gradient places colours around a centre point, like slices around a colour wheel. Set the starting angle, move the centre and position each stop around the full rotation.
Control angular softness
Softness controls how much of the space between stops is used for blending. Reduce it for longer solid arcs and quicker transitions; raise it to 100% for continuous blending between every stop.
Common conic gradient uses
Conic gradients work well for colour wheels, decorative borders, metallic effects, progress rings and chart-like visuals. Keep important information accessible rather than relying on colour alone.
Frequently asked questions
What is a conic gradient?
A conic gradient places colour stops around a centre point and blends them by angle rather than distance.
What does angular softness change?
It changes how much of each arc blends into the next colour, from sharp transitions to fully smooth blending.
Can I reposition a conic gradient?
Yes. Change both the starting angle and the horizontal and vertical centre position.