Conic Gradient CSS: A Visual How-To Guide

A conic gradient in CSS spins colors around a center point like a clock hand sweeping the face, instead of blending in a straight line or radiating outward in rings. That single difference is what lets conic-gradient() build color wheels, pie charts, progress rings, and crisp angular patterns that linear and radial gradients simply cannot produce. This guide gives you the mental model first, then practical recipes with copy-paste code.

If you have only ever used linear-gradient(), the conic version feels strange at first. The trick is to stop thinking about distance and start thinking about angle. Once that clicks, a whole category of effects opens up with no images, no SVG, and no JavaScript.

What a Conic Gradient Actually Does#

conic-gradient() places color stops around a center point by angle, sweeping clockwise from a starting direction. Picture a pie being sliced: each color stop is a cut, and the wedge between two cuts fills with a blend (or a hard edge if the stops touch). The colors rotate around the center rather than moving away from it.

That is the core distinction beginners miss. A radial gradient radiates: colors change as you move away from the center. A conic gradient rotates: colors change as you sweep around the center. Same center point, completely different motion.

Gradient type	Color changes by	Typical use
linear-gradient()	Distance along a line	Backgrounds, buttons, fades
radial-gradient()	Distance from center (rings)	Spotlights, soft orbs, vignettes
conic-gradient()	Angle around center (sweep)	Color wheels, pie charts, progress rings

Mental model to keep: linear moves, radial radiates, conic spins. If your effect needs anything that looks like a clock, a wheel, or a slice of pie, you want conic.

The basic syntax#

The minimal form takes a list of color stops, just like other gradients:

background: conic-gradient(red, yellow, green, blue, red);

That sweeps through the colors starting from the top (12 o'clock) and going clockwise back to the start. Repeating the first color (red) at the end closes the loop so there is no hard seam where the sweep wraps around.

You almost always set a center point too, because the default fills the whole element and the sweep origin sits dead center. We will tune both of those next.

How to Build a Conic Gradient Step by Step#

Here is the practical build order. Follow these steps and you can produce any conic effect, from a smooth color wheel to a segmented pie chart.

Step 1: Set the starting angle with from#

By default the sweep begins pointing up (toward 12 o'clock). The from keyword rotates that origin. Use it when you want a color to start at a specific clock position.

/* Sweep starts pointing right (3 o'clock) instead of up */
background: conic-gradient(from 90deg, red, blue, red);

Angles increase clockwise. 0deg is up, 90deg is right, 180deg is down, 270deg is left. If a wheel looks rotated wrong, adjust from rather than reordering every color stop.

Step 2: Move the center with at#

The sweep origin defaults to the element center (50% 50%). The at keyword repositions it, exactly like radial-gradient. This matters for off-center effects and for slicing only part of an element.

/* Origin at the top-left corner */
background: conic-gradient(from 0deg at 25% 25%, orange, purple, orange);

You can combine from and at in one expression: conic-gradient(from 45deg at 30% 70%, ...). Order matters: from comes before at.

Step 3: Place color stops at exact degrees#

This is where conic gradients get powerful. Instead of letting colors blend evenly, give each stop an angle so you control exactly where it sits. Angles run from 0deg to 360deg around the circle.

background: conic-gradient(
  red 0deg,
  red 120deg,
  green 120deg,
  green 240deg,
  blue 240deg,
  blue 360deg
);

Notice how each color is declared twice at the same angle pair. red fills 0deg to 120deg, then green picks up at the identical 120deg mark. That shared boundary is the secret to the next step.

Step 4: Create hard edges for slices and pie charts#

When two color stops share the same angle, the gradient has nowhere to blend, so you get a crisp line instead of a fade. That is how you turn a smooth sweep into clean wedges. The code in Step 3 already does this: three equal 120-degree slices with hard edges between them.

To make a pie chart, set each stop's angle based on its share of 360 degrees. A 25% slice ends at 90deg, a 50% slice ends at 180deg, and so on.

/* 50% blue, 30% teal, 20% amber pie */
background: conic-gradient(
  #2563eb 0deg 180deg,   /* 50% */
  #14b8a6 180deg 288deg, /* 30% */
  #f59e0b 288deg 360deg  /* 20% */
);
border-radius: 50%; /* clip the square into a circle */

The shorthand color startAngle endAngle is cleaner than repeating the color, and modern browsers support it. Add border-radius: 50% to clip the square box into an actual pie.

Step 5: Make a smooth color wheel#

For a full color wheel, sweep through the hue spectrum using HSL and let the colors blend with no hard stops. This is the classic conic showpiece.

.wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 90% 55%),
    hsl(60 90% 55%),
    hsl(120 90% 55%),
    hsl(180 90% 55%),
    hsl(240 90% 55%),
    hsl(300 90% 55%),
    hsl(360 90% 55%)
  );
}

Repeating hsl(0 ...) as hsl(360 ...) closes the loop seamlessly because hue 0 and hue 360 are the same red. Tweak the saturation and lightness to shift the whole wheel pastel or vivid.

Getting these angles right by hand is fiddly, especially for multi-stop wheels and uneven pies. Rather than counting degrees in your head, build it visually with our free CSS gradient generator, drag the stops until it looks right, and copy production-ready CSS straight out.

Repeating Conic Gradients and Patterns#

Add the repeating- prefix and the sweep tiles around the circle as many times as the angle math allows. This is how you get sunbursts, radar sweeps, and starburst backgrounds from one short declaration.

/* 12-spoke starburst */
background: repeating-conic-gradient(
  #111 0deg 15deg,
  #fff 15deg 30deg
);

Each 30-degree segment (15 black, 15 white) repeats twelve times to fill the full 360 degrees. Change the segment width to add or remove spokes.

The checkerboard trick#

One of the most useful conic patterns is the checkerboard, the kind you see behind transparent images in editors. It comes from a single conic gradient repeated as a small background tile.

.checker {
  background: conic-gradient(
    #ccc 0deg 90deg,
    #fff 90deg 180deg,
    #ccc 180deg 270deg,
    #fff 270deg 360deg
  );
  background-size: 24px 24px;
}

The four quadrants alternate gray and white, and background-size shrinks the gradient into a repeating tile. It is far lighter than a PNG and scales infinitely. If you do need a raster version of a pattern for an old email client or a legacy app, you can always render the CSS to an image, and our SVG to PNG converter handles that kind of export cleanly.

Building progress rings#

A conic gradient plus a circular mask makes a donut-style progress indicator with zero JavaScript for the visual itself.

.progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0deg 252deg, #e5e7eb 252deg 360deg);
}

Here 252deg is 70% of 360, so the green arc shows 70% progress. Update that single angle with a CSS variable and the ring fills live. Punch a hole in the middle with a smaller absolutely-positioned circle and you have a clean ring meter.

Browser Support and Practical Gotchas#

conic-gradient() has been supported in all major evergreen browsers (Chrome, Edge, Firefox, Safari) since around 2020, so for current audiences you can use it without a fallback. The cases worth planning for are older enterprise browsers and email clients, where gradient support is patchy in general.

A few things that trip people up:

• It fills the box, not a circle. A conic gradient on a square element stays square until you add border-radius: 50%. The sweep is circular, the painted area is not.
• Hard edges need matching angles. A faint blurry line between slices means your two stops are a fraction of a degree apart. Make them identical, like red 120deg, green 120deg.
• Angles, not percentages, for position. Conic stops use deg (or turn and rad). Mixing in % works in newer engines but deg is the clear, portable choice.
• turn units are tidy. 0.5turn equals 180deg. For pie math, turn can read more naturally: a quarter slice is 0.25turn.

Warning: do not rely on a conic gradient as the only way to convey data in a chart. Pair the pie or ring with a text label or legend so the information survives for screen-reader users and high-contrast modes.

For broader background techniques beyond the conic case, our walkthrough on building modern CSS gradient backgrounds covers layering linear and radial gradients for depth, which pairs well with the angular effects here.

Putting Conic Gradient CSS to Work#

Conic gradient CSS earns its place the moment you need anything that sweeps around a center: a color wheel for a picker, a pie or donut chart without a library, a progress ring, a sunburst, or a checkerboard tile. The mental shift is small but decisive. Stop thinking distance, start thinking angle, and the syntax follows naturally from there.

Start with a closed-loop color list to learn the feel, then graduate to angle-pinned stops for hard edges and repeating-conic-gradient for patterns. When the degree math gets tedious, skip the arithmetic entirely: open the visual CSS gradient generator, build the effect by eye, and copy clean CSS into your stylesheet.

Frequently Asked Questions#

What is the difference between conic-gradient and radial-gradient in CSS? A radial gradient changes color based on distance from the center, creating concentric rings or a spotlight effect. A conic gradient changes color based on the angle around the center, sweeping clockwise like a clock hand. Radial radiates outward; conic spins around.

How do I make a pie chart with conic gradient CSS? Give each slice a color with a start and end angle that matches its share of 360 degrees, using matching angles for hard edges. For example, a 25% slice spans 0deg 90deg. Add border-radius: 50% to clip the square element into a circle. A visual generator removes the angle math.

Why does my conic gradient look square instead of round? A conic gradient paints the entire element box, which is rectangular by default. The sweep is circular, but the painted area is not clipped to a circle automatically. Add border-radius: 50% to the element so the square corners are clipped away and you see a clean circle.

How do I rotate the starting point of a conic gradient? Use the from keyword with an angle, such as conic-gradient(from 90deg, ...). Angles increase clockwise, where 0deg points up, 90deg points right, 180deg points down, and 270deg points left. Adjusting from rotates the whole sweep without reordering your color stops.

Is conic-gradient supported in all browsers? Yes, all major evergreen browsers (Chrome, Edge, Firefox, and Safari) have supported conic-gradient() since around 2020, so modern audiences need no fallback. The exceptions are very old browsers and many email clients, where gradient support is unreliable in general, so provide a solid background color fallback there.

How do I create a repeating pattern like a checkerboard or sunburst? Use repeating-conic-gradient() with angle-based stops, then set background-size to control the tile. A sunburst alternates two colors in small degree segments, and a checkerboard uses four quadrant stops shrunk to a small tile size. Both render infinitely scalable with no image files.