Skip to main content
PUBLIC.INTERNET
⚡ Acces Instantane🔒 Confidentialite d'Abord🆓 Toujours Gratuit📱 Fonctionne Partout

Conic Gradient Generator

A conic-gradient() sweeps colors around a center point instead of along a line, which makes it the right CSS tool for anything circular: pie charts, donut and ring charts, color wheels, and loading indicators. Most gradient generators only emit the smooth two-color version and leave those use cases out. This one is built around them. The Type selector switches between four modes: pie renders hard-edged slices that meet at sharp boundaries; donut adds a masked-out center using a radial-gradient mask so you get a ring; color wheel builds a full hue rotation from HSL with adjustable saturation and lightness; and smooth blend softens the stops for a swirl or sheen. You edit each color stop directly, set where it ends as a percentage, rotate the whole thing with the start angle, and move the center off the middle. The preview updates as you go and the CSS panel always reflects exactly what you see, mask included.

Color stops

Each value is where that color ends, going clockwise (0 to 100%).

Live preview

CSS

How to Build a Conic Gradient
  1. Pick a type - Use the Type dropdown to choose pie, donut, color wheel, or smooth blend; the controls below adapt to that mode.
  2. Set the colors - For pie, donut, and smooth, edit each swatch in Color stops and type the percentage where that color ends; use + Add stop or the X to remove one. For a color wheel, drag Segments, Saturation, and Lightness instead.
  3. Rotate and position - Drag Start angle to spin the sweep and Center X / Center Y to move the focal point off the middle.
  4. Carve the ring - In donut mode, drag Hole size to set how much of the center is masked out for a ring or loading indicator.
  5. Copy the CSS - Click Copy CSS to grab the full rule, including the mask for donuts, and paste it onto any element.
Why This Tool?
 Search for a conic gradient tool and you mostly find generic two-color spinners or MDN reference pages. Neither helps when what you actually need is a pure-CSS pie chart or a donut ring without pulling in a charting library. Conic gradients do this natively: a pie slice is just two color stops sharing the same percentage, and a donut is the same gradient with a radial-gradient mask punched through the middle. This tool exposes those patterns directly so you can dial them in and read off the code instead of hand-calculating angle stops. 
 The hard-stop trick is the part people miss. Writing red 0% 40%, blue 40% 100% gives a crisp boundary at 40%, while a single position per color blends them. The generator switches between those two grammars for you based on the Type you pick, and for the color wheel it walks the HSL hue from 0 to 360 across the segments you choose. A practical tip: keep the element square with aspect-ratio: 1 and border-radius: 50% so the sweep reads as a clean circle, then drop the radius when you want the same gradient as a full-bleed background.