CSS Conic Gradient Generator
Design conic gradients visually and get ready-to-use CSS. Create color wheels, pie charts, and angular sweeps with a live preview — all client-side in your browser.
CSS Gradient Generator
Create beautiful CSS gradients visually. Adjust colors, stops, angles, and copy the CSS.
Color Stops (2)
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Presets
About CSS Gradients
Linear gradients transition colors along a straight line defined by an angle.0deggoes upward, 90deggoes right, 180deggoes downward.
Radial gradients radiate outward from a center point. Choose between circle(equal radius) and ellipse(stretches to fit the element).
Color stops define where each color appears along the gradient (0% = start, 100% = end). Add more stops for complex multi-color gradients.
What is a CSS conic gradient?
A CSS conic gradient transitions colors around a center point, sweeping like a clock hand. Defined with the conic-gradient() function, colors transition angularly rather than linearly or radially. Conic gradients can create effects that are impossible with linear or radial gradients, such as pie charts, color wheels, and starburst patterns — all in pure CSS with no images.
Common use cases
Conic gradients are ideal for creating pure-CSS pie charts and donut charts, color wheel pickers, angular progress indicators, and decorative starburst backgrounds. Combined with border-radius, a conic gradient can produce a perfect color wheel. They are also used for loading spinners and creative UI elements that need angular color transitions.
Frequently Asked Questions
Can I make a pie chart with a CSS conic gradient?
Yes. Use hard color stops to create distinct segments: 'conic-gradient(red 0% 40%, blue 40% 70%, green 70% 100%)' creates a three-segment pie chart in pure CSS with no JavaScript or SVG needed.
Is conic-gradient supported in all browsers?
Conic gradients are supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). For older browsers, consider providing a fallback solid color or linear gradient.