Live Preview
Gradient Settings
Color Stops (click color to edit, double-click to add)
Generated CSS
π‘ How to Use
1. Add color stops and set their angle positions
2. Adjust rotation angle (from value) and center position
3. Optionally enable repeating for repeating-conic-gradient
4. See real-time preview of the gradient
5. Copy the generated CSS code with one click
β FAQ
What's the difference between Conic, Linear, and Radial gradients?
Linear gradients transition along a straight line. Radial gradients spread outward from a center point. Conic gradients rotate around a center point by angle β like a pie chart or color wheel. Conic gradients are ideal for pie charts, color wheels, sunburst effects, and radar scans.
When should I use repeating conic gradient?
Use repeating-conic-gradient when you want the color pattern to repeat beyond 360Β°. It's perfect for creating gear effects, kaleidoscope patterns, radar scans, and any design that needs periodic repetition around a center.
Browser compatibility?
CSS conic-gradient() is well supported in modern browsers: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. It's recommended to provide a fallback background color for older browsers that don't support it.