Build a CSS conic gradient visually and copy the code — no manual angle math, no guesswork.
How It Works
A conic gradient rotates colors around a center point instead of blending them in a straight line or outward in a circle. The conic-gradient() function takes three parts: a starting angle (from), a center point (at), and a list of color stops placed by percentage around that rotation.
This generator builds the value for you: set the angle and center with the controls, add or reorder color stops, and the tool writes the matching background: conic-gradient(...) code in real time. Toggle Repeating to switch to repeating-conic-gradient(), which tiles the same color sequence around the circle instead of running it once from 0% to 100%.
When to Use a Conic Gradient
- Circular progress indicators — a two-stop conic gradient with a hard color edge (same color repeated at two positions) creates a clean pie-style progress ring without SVG or a plugin.
- Color pickers and hue wheels — the Color Wheel preset generates a full-spectrum rainbow ring, the standard base for a custom color picker UI.
- Loading spinners and decorative dividers — a small repeating conic gradient makes a lightweight spinner or pattern with zero images, which keeps a WordPress theme’s page weight down compared to an animated GIF or icon font.
- Pie charts without a charting library — for a simple, static single-series pie chart, a conic gradient with hard stops is often lighter than pulling in a full JS charting library.
FAQ
What is a CSS conic gradient?
A conic gradient is a CSS background where colors are arranged in a rotation around a center point, like the hands of a clock, rather than along a straight line (linear gradient) or expanding outward from a center (radial gradient).
How is conic-gradient() different from linear-gradient() and radial-gradient()?
A linear gradient transitions colors along an axis, and a radial gradient transitions colors outward from a center point in rings. A conic gradient transitions colors angularly, sweeping around a center point — which is what makes it suited to pie charts, color wheels, and circular progress bars.
How do I make a pie chart with conic-gradient()?
Use two color stops per “slice,” placing the same color at both the start and end percentage of that slice to create a hard edge instead of a blend. For example, gold 0%, gold 65%, gray 65%, gray 100% produces a two-slice pie split at 65%. The Pie Chart preset in this tool sets this up automatically.
What does repeating-conic-gradient() do?
It repeats the same color-stop pattern around the full 360° rotation instead of stretching it once from start to finish, which is how patterned or segmented effects (like the Checker preset) are built from a short stop sequence.
Does conic-gradient() work in all browsers?
Yes — it’s supported in all current major browsers (Chrome, Firefox, Safari, Edge). Older Safari versions (pre-2020) required a -webkit- prefix, but that’s no longer necessary for current browser versions.
Can I animate a conic gradient?
Not directly with a simple CSS transition on the gradient itself in most browsers, since gradients aren’t natively interpolated. Rotating the element with transform: rotate(), or animating a custom property registered with @property, are the two common workarounds.