CSS Conic Gradient Generator

Create conic and repeating conic gradients visually for pie-chart backgrounds and decorative effects.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Conic Gradient Generator does, with a checked example

Conic gradients paint color around a center point the way a clock hand sweeps, which makes them the CSS-native way to draw pie-chart slices, dials, and sunbursts. This tool shows that sweep live on a preview circle as you add color stops, set their angle positions, adjust the start angle and center, and toggle the repeating variant, then returns a ready-to-paste background declaration. The usual surprise: single-position stops blend smoothly into the next color, so the result is a color wheel, not crisp pie slices, until you give each color two positions.

Worked example

A concrete input and expected output from the current implementation.

Input

Stops: #ef4444 at 0-25%, #f97316 at 25-50%, #22c55e at 50-75%, #3b82f6 at 75-100% (four equal slices)

Expected output

background: conic-gradient(#ef4444 0 25%, #f97316 25% 50%, #22c55e 50% 75%, #3b82f6 75% 100%);

Each color is pinned between two positions, so the edges are hard. Four slices of 25% of the circle, or 90 degrees each, start at 12 o'clock and sweep clockwise: red, orange, green, blue.

How the result is produced

Angle model

Conic stops are measured clockwise from 12 o'clock: 0% or 0deg at the top, 25% or 90deg at the right, 50% at the bottom. The tool shows this sweep on the preview circle and writes your stop positions into the declaration in the same units. The first parameter can add a from angle, which rotates the entire sweep, and a center position, which moves the pivot point from its default of 50% 50%.

Hard stops and repetition

A stop written once, such as red 25%, starts a gradual blend into the following color. Writing it twice, red 0 25%, anchors the color at two positions so the edge is abrupt, which is what pie and dial segments need. The repeating variant tiles the whole stop list around the circle; with mismatched first and last colors, a visible blend band appears where one tile meets the next.

Good uses

Pie and donut chart segments, drawn as a single rounded element with a conic-gradient background and no SVG markup.
Progress rings, speedometer dials, and countdown sweeps, where a conic gradient sits behind a mask that leaves only an arc visible.
Decorative wedges and sunbursts behind cards or hero sections, with repeating-conic-gradient producing the repeated sector pattern.

Limits and checks

Convention check: 0% points at 12 o'clock and the sweep is clockwise. If a stop you set at 90deg lands where you expected the left side, that is the CSS convention, not a bug; add a from angle to rotate the start.
Single-position stops blend: red 25% paints a gradual wedge into the next color, not an edge. Crisp slices require two positions per color (red 0 25%), and the last color always blends back into the first around the 360-degree seam unless you make them match.
The generated rule is a background-image declaration; pasted into the background shorthand it replaces any existing background color or image on that element, and stops that do not cover the full sweep fill the remaining angle with the wrap-around transition back to the first color.

Common questions

My slices look blurred instead of crisp. How do I get sharp pie edges?

Give every color two positions. A stop like red 25% only marks where red begins, so the browser blends it into the next color. Writing red 0 25% pins the color across the whole slice, and the next color starts exactly at 25% with no blend band. Two-position stops are the standard trick for pie-chart conic gradients.

How do I make the gradient start at the bottom instead of the top?

Add a from angle: conic-gradient(from 180deg, red, orange, green, blue) rotates the start to 6 o'clock. Angles are measured clockwise from 12 o'clock, so from 90deg starts at 3 o'clock and from 270deg at 9 o'clock. The tool's start-angle control generates this parameter for you.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.