What is a conic gradient?

A conic gradient paints colors around a center, like a sweep. CSS uses conic-gradient(). The from angle sets where the sweep starts. Stops are angles or percentages around the circle.

How do I make hard slices instead of a smooth sweep?

Place two stops at the same position. The blend between them has zero length, so the edge is sharp. That is the same hard-stop pattern described in the gradient stop guide.

Can a conic gradient replace a color wheel?

It can draw a wheel, but it does not compute harmonies. Use the interactive color wheel to pick complementary, analogous, or triadic hues, then bring those hex values back here as stops. The relationships are explained in color theory 101.

Should chart slices rely on color alone?

No. WCAG 2.2 Success Criterion 1.4.1 says color cannot be the only visual means of conveying information. Label slices or add a pattern. Preview problem pairs in the color blindness simulator.

Conic Gradient Generator — Free CSS Tool

Gradient type

Angle: 90°

Color stops

Position: 0%

Position: 50%

Position: 100%

Presets

CSS

background: conic-gradient(from 90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: -webkit-conic-gradient(from 90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: conic-gradient(from 90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);

Import colors from the palette generator. Bright RGB gradients may shift in CMYK print — verify before production.

Color tools

Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.

View all tools →

How a conic gradient is built

conic-gradient() sweeps around a center. The from angle sets the start of the sweep. Stops can be percentages or angles. 0% and 100% meet at the start angle, so a wheel that should close needs the first and last colors to be the ones you want touching.

Hard slices use coincident stops. A pie with three equal parts can place colors at 0%, 0% to 33%, 33% to 66%, and 66% to 100%, repeating the color at each boundary so nothing blends across the cut. A smooth hue sweep leaves the positions out or spaces them on purpose.

Conic gradients show up in dashboards more often than in marketing heroes. A chart that uses hue as the only difference between series fails for people who cannot separate those hues. Add labels. The color wheel is the place to pick the hues; this page is the place to turn them into CSS.

The same interpolation caveat applies. A sweep between saturated, distant hues in sRGB can look muddy on one side of the circle. Compare the rendered result in the browsers you support before you treat the CSS as finished.

Compare this with the other shapes in the CSS gradient generator, including linear, radial, and conic. The CSS gradients guide covers syntax, and choosing color stops covers positions, hints, and hard edges. Pull seed colors from the palette generator or from a photo with palette from image.

FAQ

Frequently asked questions

Questions about conic CSS gradients and this generator.

What is a conic gradient?: A conic gradient paints colors around a center, like a sweep. CSS uses conic-gradient(). The from angle sets where the sweep starts. Stops are angles or percentages around the circle.
How do I make hard slices instead of a smooth sweep?: Place two stops at the same position. The blend between them has zero length, so the edge is sharp. That is the same hard-stop pattern described in the gradient stop guide.
Can a conic gradient replace a color wheel?: It can draw a wheel, but it does not compute harmonies. Use the interactive color wheel to pick complementary, analogous, or triadic hues, then bring those hex values back here as stops. The relationships are explained in color theory 101.
Should chart slices rely on color alone?: No. WCAG 2.2 Success Criterion 1.4.1 says color cannot be the only visual means of conveying information. Label slices or add a pattern. Preview problem pairs in the color blindness simulator.