CSS Conic Gradient Generator
Build CSS gradients visually: linear, radial or conic type, angle slider and up to six color stops with a live full-width preview and copyable code.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the gradient generator with the conic type already selected: instead of fading along a line or out from the center, the colors sweep around the center like a clock hand, starting from the angle you set on the slider.
conic-gradient() is the newest of the three CSS gradient functions and the one behind pie charts, color wheels, and eye-catching rotating-border effects. Stop positions in percent are positions around the circle — two stops at 0% and 100% blend smoothly all the way around, while stops placed close together create crisp wedges.
Adjust the start angle and stops until the preview reads right, then copy the background line. All modern browsers support conic gradients, so the code is safe to ship.
Example. A linear gradient at 90 degrees from #2563eb at 0% to a second stop copies linear-gradient(90deg, #2563eb 0%, ...).
Limit. There are at most six color stops, and the angle slider runs from 0 to 360 degrees.