CSS Conic Gradient: Pie Charts and Color Wheels

A CSS conic gradient sweeps color around a center point by angle, so each color fills a slice of the circle instead of a band across it. You write it with the conic-gradient() function, list your color stops in degrees or percentages, and the browser rotates through them like the hand of a clock. Per MDN's conic-gradient reference, the function produces an <image> whose colors transition around a center rather than radiating out from it.

That rotation is the entire trick. It is what lets one line of CSS draw a pie chart, a color wheel, or a loading spinner with no SVG and no image file to download. This guide walks through the syntax, builds the two flagship effects step by step, covers the repeating variant for patterns, and shows where browser support stands today.

Key Takeaways

• A CSS conic gradient rotates color by angle around a center, while radial spreads it by distance (MDN).
• Minimal shape: conic-gradient(from <angle> at <position>, color 0deg, color 120deg, ...).
• Two hard stops at the same angle create a crisp pie-slice edge with no fade.
• Wrapping hsl() hues across 360deg builds a full color wheel in one declaration.
• Conic shipped in Chrome and Safari in 2018 to 2019 and Firefox in late 2020, so verify support for old browsers (caniuse).

What Is a CSS Conic Gradient?

A CSS conic gradient is a color transition that rotates around a center point, painting each color into an angular wedge of the circle. It belongs to the <image> family in CSS, the same model behind the whole CSS gradient family. That means it works anywhere an image works: background-image, mask-image, and border-image all accept one. MDN's gradient overview lists every gradient function and the properties that take them.

The name comes from the cone you would picture looking straight down at its tip. Colors fan out around the axis and meet back at the starting angle after a full 360 degrees. The CSS Images Module Level 4 standardizes this behavior, defining how the browser places each stop by angle and interpolates the arc between neighboring stops.

Every conic gradient needs the same two ingredients as its cousins: a set of color stops and a center to rotate around. A stop pairs a color with an angle, and the browser sweeps clockwise from one stop to the next. Change the angles and you resize the slices. Change the center and you move the pivot.

Conic vs. Radial Gradients

A conic gradient is not a radial gradient. Radial fades color by distance from the center, so its transition moves outward in rings. Conic fades color by angle, so its transition travels around the center in slices. Same center point, different direction of travel. MDN's conic-gradient page draws the contrast directly against radial-gradient().

The practical test is one question. Does your effect change as you move away from the middle, or as you rotate around it? A glow, a spotlight, or a vignette grows brighter or darker with distance, so that is radial. A pie chart, a color wheel, or a spinner changes as you turn, so that is conic. The radial gradient guide covers the distance-based side in full.

Property	radial-gradient()	conic-gradient()
Transition axis	Distance from center	Angle around center
Reads as	Rings, ripples, glow	Slices, wedges, sweep
Flagship use	Spotlights, vignettes	Pie charts, color wheels
Stop unit	Length or percentage	Angle or percentage

Reading the table as a decision tool saves time. Pick radial when depth or light is the point, and pick conic when rotation or proportion is the point. The two even share a stop syntax, so once you know one, the other is mostly a matter of swapping distances for angles.

The conic-gradient Syntax

The conic-gradient() syntax takes an optional starting angle, an optional center position, then a list of color stops. The full shape is conic-gradient(from <angle> at <position>, color1 deg1, color2 deg2, ...). Both the from and at clauses are optional. Skip them and the sweep starts at the top and pivots at the exact center. MDN's conic-gradient reference documents each clause and its defaults.

from <angle> rotates the whole gradient. Writing from 90deg starts the sweep at three o'clock instead of twelve. at <position> moves the center and takes the same values as background-position, so at 25% 25% pivots near the top-left corner. Color stops then follow, each a color with an optional angle that pins it to a spot on the circle.

Angles decide whether the sweep is even or precise. conic-gradient(red, yellow, green, blue, red) runs through four hues and back to red, evenly spaced because no angles are set. Add explicit angles, as in conic-gradient(red 0deg, red 90deg, blue 90deg, blue 360deg), and each color pins to an exact arc. Any angle you omit is distributed evenly, matching the interpolation rules in the CSS Images specification.

How Do You Build a CSS Pie Chart?

Building a CSS pie chart takes one conic gradient with hard color stops, where two stops share the same angle to make a crisp edge instead of a fade. conic-gradient(#6366f1 0deg 90deg, #ec4899 90deg 200deg, #22c55e 200deg 360deg) draws a three-slice pie. Give the box a size and round it, width: 200px; aspect-ratio: 1; border-radius: 50%, and the chart is finished. A gradient painted on a zero-height box shows nothing, so the dimensions matter. CSS-Tricks' gradient walkthrough demonstrates the hard-stop technique.

The rule is to repeat the boundary angle. Where one slice ends at 90deg, the next begins at 90deg, and because there is no gap the browser paints a clean line rather than a blend. Drop the shared angle and you get a smeared rainbow, not a chart.

Sizing each slice is plain arithmetic. A full circle is 360 degrees, so a slice worth 25 percent of the data spans 90 degrees, and a 10 percent slice spans 36 degrees. Convert each value to its share of 360, stack the running totals, and those totals become your stop angles. That maps data straight to degrees with no charting library loaded on the page.

The same hard-stop pie sits one step from a loading spinner. Draw a two-color conic, mask the middle into a ring, then rotate the element with a transform animation, and the wedge chases its own tail. That is the pattern behind most pure-CSS spinners you see on the web.

How Do You Build a Color Wheel?

A color wheel is a conic gradient that runs through every hue and wraps back to the start, and it is easiest to write with hsl(). Because HSL expresses hue as an angle from 0 to 360, it maps one-to-one onto the sweep. MDN's color value reference explains the HSL angle model that makes this work.

A readable version lists a hue every 60 degrees: conic-gradient(hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%)). That covers red, yellow, green, cyan, blue, magenta, and back to red. Size and round it with width: 200px; aspect-ratio: 1; border-radius: 50% and you have the picker ring seen in most design tools.

Saturation and lightness stay fixed in the simple wheel, which is why it reads as a flat ring of pure hues. Vary them per stop and the ring gains shading, though the math to keep it even gets fiddly fast. For a plain hue reference, the fixed version is usually enough.

One caveat about smoothness deserves a plain statement. The wheel looks continuous, but the browser still interpolates in a straight line between the stops you list, so widely spaced hues can band. When we first built the 6-stop wheel on a 300px ring, the arcs wider than 60 degrees banded visibly until we dropped in a stop every 30 degrees. More stops mean smoother color at the cost of a longer declaration. To pick hues that transition cleanly, a live CSS gradient generator beats guessing at hex values by hand.

Repeating Conic Gradients for Patterns

The repeating-conic-gradient() function tiles an angular pattern instead of stretching it once around the circle, which is how you draw checkerboards and starbursts. It takes the same arguments as conic-gradient() but loops the stop sequence as soon as the last angle is reached. MDN's conic-gradient documentation describes the repeating variant alongside the base function.

A starburst is the classic case. repeating-conic-gradient(#000 0deg 10deg, #fff 10deg 20deg) spins alternating black and white wedges every 20 degrees, producing a pinwheel with no image asset. Narrow the angle and the blades multiply. Widen it and they thin out into broad fans.

Checkerboards combine repetition, hard stops, and background sizing. A repeating conic of two colors in 90-degree quarters, then tiled with background-size, lays down the checker pattern that used to require a PNG. These patterns weigh zero bytes and scale to any resolution, the same argument that makes gradients cheaper than image files across the board.

Is the CSS Conic Gradient Supported in Browsers?

The CSS conic gradient is supported in every current major browser, but it arrived later than linear and radial, so older versions miss it. Caniuse's gradient data shows conic support completing across browsers in late 2020, after Chrome and Safari had shipped it in 2018 and 2019. For most projects today, the unprefixed syntax is safe to write.

The lag has a clear reason. Linear and radial gradients were part of the original CSS3 image work, while conic came with the CSS Images Module Level 4 and reached browsers in stages: Chrome and Safari in 2018 and 2019, then Firefox in late 2020, which is when conic became safe cross-browser. If your analytics still show meaningful traffic from pre-2020 browsers, ship a solid-color or image fallback underneath.

Performance follows the same rules as any gradient. A static conic paints once and costs nothing you will notice, but animating one or spreading it across a huge surface can tax the paint step. The gradient performance guide covers profiling and the fixes that keep repaints cheap on busy pages.

How Do You Write a CSS Conic Gradient?

The fastest path to a working CSS conic gradient is a visual generator that writes the degrees for you, then a quick manual pass to tune the stops. ToolSura's CSS gradient generator lets you set colors and angles, then copies production-ready code. Writing one by hand takes five short steps.

1. Start with the conic-gradient() function and assign it to an image property, usually background.
2. Optionally set the origin: from <angle> to rotate the sweep and at <position> to move the center.
3. List your color stops in order, each a color followed by an optional angle in degrees.
4. For a pie chart, repeat the boundary angle on adjacent stops so every edge stays crisp.
5. Add border-radius: 50% to clip the square box into the circle a pie or wheel needs.

A minimal example ties it together: background: conic-gradient(#6366f1, #ec4899, #6366f1) sweeps indigo to pink and back, evenly spaced around the circle. Add from 45deg at the front and the whole sweep rotates an eighth-turn clockwise. Every conic effect, from chart to wheel to spinner, grows out of that one pattern.

Related Tools & Further Reading

Conic is one of three gradient types, and the guides below cover the rest plus the generator that turns any of them into copy-paste code. Start with the effect you need, then reach back to the fundamentals when a single sweep is not enough.

• CSS Gradients Explained: Linear, Radial, and How to Use Them
• CSS Radial Gradient: Complete Guide with Examples
• CSS Gradient Performance: Browser Rendering and Optimization
• Tool: CSS gradient generator to build linear, radial, and conic gradients visually.