Conic Gradient Generator
Create a conic gradient with adjustable start angle and stops.
Angle-based conic gradients
A conic gradient sweeps colors around a center point rather than across a line, which makes it the right tool for pie-chart wedges, color wheels, angular loaders, and decorative backgrounds. This generator lets you set the start angle and color stops with a live preview.
Conic gradients are harder to hand-write than linear ones because the angle math is unforgiving, so a visual builder saves real time. Adjust the stops until it looks right and copy the ready-to-use conic-gradient() CSS.
Copy-ready conic CSS
The generated conic-gradient() sweeps color around a center point you set, ready for pie wedges or a color wheel. It is built in your browser, so nothing is uploaded.
Frequently asked questions
What does the conic gradient generator do?
It creates a CSS conic-gradient value from two colors and a start angle.
Why does the gradient repeat the first color at the end?
The output is conic-gradient(from Xdeg, A, B, A), which returns to the starting color so the sweep closes without a hard seam where 360° meets 0°.
What does the start angle change?
It rotates where the sweep begins. 0deg starts at the top (12 o'clock) and runs clockwise, so 90deg starts at 3 o'clock.
How do I make a pie chart instead of a smooth sweep?
Use hard stops by giving each color a start and end percentage, such as conic-gradient(#f00 0 40%, #00f 40% 100%). Edit the generated value to add stops like these.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.