How is a conic gradient different from a linear one?

It sweeps around a centre point rather than across the element, so stop percentages are fractions of a full turn rather than distances across the box.

Why is there a visible seam in my gradient?

Zero and one hundred percent are the same point on the circle, so the last colour meets the first. Add a stop at one hundred percent using the first colour to close the loop.

What does the angle control do?

It sets where the sweep begins, rotating the whole gradient around its centre without altering the colours or the distances between stops.

Can I make a segmented disc instead of a smooth blend?

Yes. Place two stops at the same position to create an abrupt edge rather than a transition, which is how a pie-chart style ring is built.

Can I build a pie chart with unequal sectors?

Yes — every sector is a pair of stops sharing a boundary position, and the spacing between the pairs is free, so unequal slices are just uneven gaps. The percentages have to be worked out from the data first, since the sliders take numbers rather than values.

Conic Gradient Generator

Stops

Stop 1

Position: 0%

Stop 2

Position: 100%

Angle

90°

CSS

background: conic-gradient(from 90deg, #3B82F6 0%, #EF4444 100%);

You Might Also Need

Linear Gradient Generator

Build linear gradients with control over angle

Radial Gradient Generator

Build radial gradients with shape & position

Hard-Stop Gradient Generator

Build sharp hard-stop gradients

CSS Gradient Animation Generator

Generate animated CSS gradients

The conic gradient generator builds a gradient that sweeps around a centre point, with editable color stops, a from-angle control and copy-ready CSS output.

What is Conic Gradient Generator?

The conic gradient generator builds the gradient that travels around a point instead of across a box.
The controls are the shared set with one addition: a live preview, a stop list with a position slider per colour, an angle that decides where the sweep begins, and the finished CSS with a copy button.
Two stops are in place to begin with; more can be added, and a stop can be removed once more than two remain.
Between them, the simplest two-tone disc and a multi-band ring are both a few clicks away.

That circular behaviour is what makes conic different from its linear and radial relatives, and it changes what a stop position means. In a linear gradient a percentage is a distance across the element; in a conic gradient it is a fraction of the full turn, so fifty percent sits on the opposite side of the centre from zero, and one hundred percent arrives back where the sweep started. Reading the preview with that in mind makes the stop sliders predictable rather than fiddly, and it is why a two-stop conic looks like two halves rather than a smooth blend from one edge to another.

The from-angle control rotates where the sweep begins. It is set to ninety degrees by default, and dragging it moves the whole gradient around the centre without changing the colours or the spacing between them, which is how you aim the transition at a particular corner or line it up with a layout. The generated declaration takes the form of a background using a conic-gradient function with the angle first and the stop list after it, so the angle and the stops are the only two things in the output.

One consequence of the geometry is worth planning for. Because zero and one hundred percent occupy the same point on the circle, a two-stop gradient has a hard seam where the second colour meets the first. Adding a third stop at one hundred percent using the first colour closes the loop and produces a continuous ring, which is the standard fix and the reason loop-based conics usually have one more stop than you might expect. Conversely, deliberately leaving a seam is how you get a two-tone disc.

Because stop positions are independent sliders, unequal spacing and hard bands are both available. Placing two stops at the same position produces an abrupt edge rather than a blend, which is the approach behind segmented discs: a pie-chart style ring is a conic gradient with pairs of stops sharing positions. That makes this tool useful beyond decoration, since a quick segmented backdrop or a progress disc can be built here and copied out as a single declaration rather than assembled as markup.

A few practical notes about the output. The CSS is emitted as a background declaration and uses the standard function with an angle and a percentage-positioned stop list, so it drops into a stylesheet, a styled component or an inline style without alteration. Everything is computed from the stops you have set, and the preview updates as you drag, so tuning is a matter of watching rather than guessing. There is no export beyond the declaration itself, which keeps the tool focused on getting the gradient right rather than on packaging it.

Used as a conic gradient generator it is fast and exact: set two stops for a disc, add a closing stop for a ring, drag the from-angle until the seam sits where it should, then copy the conic-gradient CSS straight into a stylesheet. For anything that needs an angular gradient generator — colour rings, segmented charts, decorative sweeps built from a conic gradient with color stops — the preview and the emitted declaration together are usually all you need.

How to use Conic Gradient Generator

Set the starting angle with the Angle slider.
Set each stop's colour and position, using Add stop and Remove to edit the list.
Watch the preview repaint as the stops change.
Copy the background declaration from the CSS panel.

When to use Conic Gradient Generator vs related tools

Use this generator for any gradient that sweeps around a centre point: rings, discs, segmented charts and angular decoration. Use the linear or radial generator when the gradient should run across or outward instead. When the job is placing the boundaries rather than aiming the sweep, the gradient color stop editor turns the same stop maths into sliders, and a value you have written yourself can be checked in the gradient previewer — conic gradients included.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.