Conic Gradient Generator
Create gradients that rotate around a center point
Export Code
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Preset Gradients
What is a Conic Gradient?
Conic gradients rotate colors around a center point, like a color wheel or pie chart. While linear gradients flow in one direction and radial gradients expand outward, conic gradients spin around an axis—perfect for circular visualizations.
The gradient sweeps clockwise by default, starting from the top (12 o'clock position). You can adjust the starting angle and position the center anywhere within the element.
Why Use Conic Gradients?
Conic gradients solve problems that other gradient types can't. Need a pie chart? Conic gradient. Color wheel picker? Conic gradient. Circular progress indicator? Conic gradient with color stops.
Before conic gradients, these effects required SVG or canvas. Now, pure CSS handles them with better performance, easier maintenance, and simpler code.
How It Works
The syntax specifies starting angle and position:
background: conic-gradient(from angle at position, colors...);
Colors distribute by degree (360° total). Hard stops create pie segments: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 360deg).
Our generator makes angle math visual. Define segments by dragging, and export clean CSS.
Common Use Cases
- Pie charts and donut charts
- Color wheel pickers
- Circular progress indicators
- Decorative starburst patterns
CSS Example
background: conic-gradient(from 0deg, #f06, #9f6, #06f, #f06);Pro Tip
Create a donut chart by masking the center with another element or using radial-gradient overlay.
Other Gradient Types
Related Design Tools
Explore more free tools to enhance your design workflow