What is a CSS conic gradient?

A conic gradient sweeps colours around a centre point by angle, like the hand of a clock rotating through a colour wheel. The CSS syntax is conic-gradient(from at , , …) where each stop position is measured in degrees (0deg to 360deg) rather than as a length, which is what makes it different from linear and radial gradients.

How is a conic gradient different from a radial gradient?

A radial gradient blends colours outward from the centre toward the edge (distance-based), while a conic gradient blends colours around the centre as the angle changes (rotation-based). Radial is good for spotlights and glows; conic is the right tool for colour wheels, pie and donut charts, angular spinners and sunburst patterns.

How do I make a pie chart with a conic gradient?

Turn on the Hard stops option. Instead of blending smoothly between colours, each colour fills the wedge from its angle up to the next stop, producing crisp pie-chart segments. Add one stop per slice and set its starting angle to control the wedge sizes.

What does a repeating conic gradient do?

A repeating-conic-gradient tiles your colour stops around the circle as many times as they fit, so two stops at 0deg and 15deg repeat 24 times to form a sunburst or starburst. Use it with hard stops for sharp rays or smooth blending for a rotating sheen.

Can I export the gradient as SVG?

Yes. SVG has no native conic-gradient primitive, so the tool approximates it with many thin pie wedges sampled from your colour stops. The result is a self-contained you can paste into a file or markup — no external assets, fonts or network requests.

Do conic gradients work in all browsers?

Conic gradients are supported in all current versions of Chrome, Edge, Firefox and Safari. For very old browsers you can supply a solid-colour fallback or use the SVG export, which renders the same shape everywhere.

CSS Conic Gradient Generator

A visual CSS conic-gradient generator built around the one thing that makes conic gradients unique: angle. Where linear and radial gradients position colours by distance, a conic gradient sweeps colour around a centre point as the angle changes — which is exactly how you build colour wheels, pie and donut charts, angular loading spinners, sunbursts and rotating sheens in pure CSS, with no images and no JavaScript at runtime.

Instead of typing degrees by hand, you drag colour stops around a live wheel. Each handle sits on the rim at its angle, so the editor mirrors the final result one-to-one. You can move the gradient’s centre anywhere in the box, change the start angle to rotate the whole sweep, dial per-stop opacity for fades, and flip between a smooth blend and crisp hard stops for pie-chart wedges. A repeating mode tiles your stops around the circle to make sunbursts in a single line of CSS.

How it works

The tool emits standard conic-gradient() (or repeating-conic-gradient()) syntax: conic-gradient(from <start>deg at <x>% <y>%, <colour> <angle>deg, …). Stops are always sorted by angle before the CSS is built, so dragging a handle past its neighbour never breaks the output. In hard-stop mode each colour is written as a wedge — colour Adeg Bdeg — so it fills the slice from its own angle up to the next stop, giving clean pie segments instead of a blend.

The wheel editor converts pointer position into an angle with atan2, accounting for both the centre offset and the start angle, so a handle always lands where you drop it. Opacity is applied by converting the hex colour to rgba() only when a stop is below full alpha, keeping the CSS tidy. The SVG export samples your stops across 180 thin wedges — because SVG has no native conic primitive — so you still get a faithful, fully self-contained vector you can drop anywhere.

Everything you build can be saved to an in-browser gallery (via localStorage), re-loaded with one click, and exported as a CSS background, a Tailwind arbitrary value, or standalone SVG.

Example

To build a four-slice pie chart, load the Pie chart preset: it turns on hard stops and places red, blue, green and amber at 0deg, 110deg, 200deg and 290deg. Drag any handle to resize a wedge. The output is one declaration:

background: conic-gradient(from 0deg at 50% 50%, #ef4444 0deg 110deg, #3b82f6 110deg 200deg, #22c55e 200deg 290deg, #f59e0b 290deg 360deg);

For a loading spinner, use the Spinner sweep preset — a single colour fading from transparent at 0deg to solid at 360deg — then animate it with a CSS rotation. For a sunburst, enable repeating with two close stops and watch the rays multiply around the circle.

Every colour, every line of CSS and every SVG is computed in your browser — no figures, colours or images are ever uploaded or stored on a server.