CSS Conic Gradient: Browser Support, Syntax, Use Cases

What is CSS conic gradient?

CSS conic gradient is a CSS function defined in the W3C CSS Images Module Level 4. It paints color stops rotated clockwise around a center point of the box, starting from the top by default. Pie charts, color wheels, and angular sweeps are the typical outputs.

Which browsers does CSS conic gradient support?

CSS conic gradient has wide modern browser support but did not ship in Internet Explorer or in Safari before 12.1. Every Chromium-based browser, Firefox, and Safari supports the function on desktop and mobile today.

What is the syntax of CSS conic gradient?

conic-gradient takes an optional starting angle, an optional center position, an optional color interpolation method, and a comma-separated list of angular color stops. Every clause except the color stops can be omitted, and the function defaults to a 0deg sweep centered on the box.

• from <angle>: Sets where the gradient starts on the clock face. The default is 0deg, which points to the top. Accepts deg, grad, rad, and turn. Example: from 45deg or from 0.25turn.
• at <position>: Moves the center of the gradient using the same syntax as background-position. The default is center. Example: at 50% 30% or at 0 0 to anchor the sweep at the top-left corner.
• <color-interpolation-method>: Selects the color space the renderer uses to mix between stops. Accepts in oklch, in hsl shorter hue, in hsl longer hue, and other CSS Color 4 spaces. Ships in Chrome 111, Firefox 113, and Safari 16.2.
• <angular-color-stop-list>: A list of color stops with optional angles. Two angles on the same color create a hard stop. Example: red 90deg, blue 90deg 180deg, yellow renders a sharp transition at 90deg.
• repeating-conic-gradient: The sibling function that tiles the entire color stop list across the 360-degree sweep. Same syntax, same browser support, useful for stripes and sunburst patterns.
• Output and dimensions: conic-gradient returns a CSS <image>, so it works on any property that accepts an image. The image has no intrinsic size and stretches to fill the box.

/* Color wheel using longer-hue interpolation */
.color-wheel {
  background-image: conic-gradient(
    in hsl longer hue,
    hsl(0 100% 50%),
    hsl(360 100% 50%)
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Three-slice pie chart with hard color stops */
.pie {
  background: conic-gradient(
    #ef4444 0deg 90deg,
    #3b82f6 90deg 210deg,
    #facc15 210deg 360deg
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Feature query fallback for older browsers */
.banner {
  background: #1f2937;
}
@supports (background: conic-gradient(red, blue)) {
  .banner {
    background: conic-gradient(from 45deg, #1f2937, #4f46e5, #1f2937);
  }
}

Formal Syntax of conic-gradient()

For a precise reference, here is the formal grammar of the function as defined in the W3C CSS Images Module Level 4. Each token in angle brackets is a CSS formal type that expands into its own production.

conic-gradient() =
  conic-gradient(
    [ from <angle> ]? [ at <position> ]?,
    <angular-color-stop-list>
  )

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#

<angular-color-stop> = <color> [ <angle-percentage>{1,2} ]?
<angular-color-hint> = <angle-percentage>

• <angle>: The optional from starting angle (deg, grad, rad, or turn).
• <position>: The optional at center point, using background-position syntax.
• <angular-color-stop-list>: The required list of color stops, each an <angular-color-stop> (a color with up to two angle/percentage positions), optionally separated by an <angular-color-hint> that shifts the midpoint.
• <color-interpolation-method>: The CSS Color Module Level 4 clause (for example in oklch or in hsl longer hue) that can precede the stop list to set the mixing color space.

The same grammar applies to repeating-conic-gradient(), which simply tiles the resolved stop list across the full 360-degree sweep.

What is the difference between conic-gradient and radial-gradient?

conic-gradient and radial-gradient are both CSS image functions that paint a multi-color background, but they sweep colors along different axes. The choice between them is driven by the visual outcome you need.

What are the use cases of CSS conic gradient?

conic-gradient ships in every modern browser, so design teams now use it as a first-class image source for any pattern that has a circular sweep. The most common production patterns are decorative rather than data-bearing.

• Decorative pie charts: Hard color stops on a 360-degree sweep with border-radius: 50% produce a clean pie shape with zero markup. Use this for dashboard accents and microcharts, but if the chart carries meaning, add role="img" and an aria-label (see the accessibility section below), since screen readers cannot announce a gradient background on their own.
• Color wheels and pickers: conic-gradient(in hsl longer hue, hsl(0 100% 50%), hsl(360 100% 50%)) renders a full-spectrum color wheel in one declaration. Pair it with a pointer overlay to build a HSL picker without canvas.
• Segmented progress rings: Combine conic-gradient with mask-image: radial-gradient to carve a doughnut. Animate the from angle through CSS custom properties and @property to drive a smooth progress arc.
• Sunburst and ray patterns: repeating-conic-gradient with two alternating colors at narrow angle stops creates a starburst background that scales with the box and stays crisp on retina displays.
• Animated avatar borders: Apply conic-gradient as the background of a wrapping div, then rotate the from angle on a CSS keyframe loop. The result is the rotating multi-color border seen on Stripe, Linear, and many design portfolios.
• Checkerboard and tile patterns: conic-gradient with hard stops at 0.25turn boundaries replaces the older approach of two background-image gradients, and the rule is shorter to maintain.

Advanced Conic Gradient Patterns: Off-Centered and Checkerboards

Two patterns show off what the function can do beyond a basic sweep: moving the center with the at position syntax, and building a CSS-only checkerboard with hard color stops.

Off-centered gradient

By default the sweep is centered. The at <position> clause moves the origin anywhere in the box, which is how you create an off-axis light-source or spotlight effect.

/* Center moved to the top-left quadrant */
.off-centered {
  background: conic-gradient(
    from 0deg at 25% 25%,
    #f97316,
    #7c3aed,
    #f97316
  );
}

CSS-only checkerboard

Hard color stops at quarter-turn boundaries produce a four-square tile; set a background-size and the tile repeats into a full checkerboard, no images and no extra markup.

/* Repeating checkerboard using hard stops */
.checkerboard {
  background-image: conic-gradient(
    #e5e7eb 0.25turn,
    #ffffff 0.25turn 0.5turn,
    #e5e7eb 0.5turn 0.75turn,
    #ffffff 0.75turn
  );
  background-size: 40px 40px;
}

This replaces the older two-linear-gradient checkerboard trick with a single, shorter declaration.

Accessibility Considerations for CSS Conic Gradients

A conic gradient renders as a CSS background image, and assistive technologies and screen readers do not interpret background images. A pie chart or progress ring painted purely with conic-gradient is therefore invisible to a non-sighted user, it conveys no value, label, or structure. If the visual carries meaning, you must add it back with semantic HTML.

The minimum accessible pattern wraps the decorative element in a container with role="img" and a descriptive aria-label, so the browser exposes a single labeled image node to the accessibility tree:

<div
  role="img"
  aria-label="Pie chart showing 60% market share"
  style="width:160px; height:160px; border-radius:50%;
         background:conic-gradient(#2563eb 0 60%, #e5e7eb 60% 100%)">
</div>

• role="img" tells assistive tech to treat the element as a single graphic rather than an empty container.
• aria-label supplies the text alternative a screen reader announces, describe the data, not the colors (for example, the actual percentage).
• Prefer real SVG for data: When the chart is genuinely data-bearing and interactive, author it as an SVG or an accessible data table so each segment can carry its own semantics.

What are the known issues with CSS conic gradient?

conic-gradient is in every modern browser, but the way each engine rasterizes the sweep, handles interpolation methods, and falls back on older devices still trips up production builds.

• Interpolation method gaps on older Safari: Safari 12.1 to 16.1 supports conic-gradient but does not parse the in oklch or in hsl longer hue clause. A color wheel that depends on longer-hue interpolation falls back to flat colors on those builds. Gate the rule with @supports (background: conic-gradient(in oklch, red, blue)).
• Banding on small elements scaled up: conic-gradient is rasterized at the painted box size, so a 24px element scaled up through transform: scale(8) shows visible color banding. Render the gradient at its final size and avoid scaling, or use an SVG conic gradient when the element grows past 256px.
• Animation jank without @property: CSS keyframes that interpolate the from angle through a custom property need @property syntax registration to animate smoothly, since unregistered custom properties animate as strings. Register the property as <angle> and the rotation becomes hardware-accelerated.
• No transparency at the seam: conic-gradient does not interpolate alpha cleanly across the 360-degree seam in older Chromium and Firefox builds. A red-to-transparent-to-red sweep shows a faint dark line at the start angle on Chrome below 100 and Firefox below 95. Use a slightly under-360 sweep with a hard stop to hide the seam.
• Flag-gated builds rendering nothing: Chrome 59 to 68, Opera 46 to 55, and Firefox 75 to 82 ship the function disabled by default. A user on those builds without the flag toggled sees a blank background, not the fallback color, unless the page declares the fallback before the conic-gradient declaration.

In my experience, the failure that bites teams the most is the missing fallback, where a designer ships a conic-gradient hero on a marketing page, the QA pipeline tests Chrome and Firefox only, and Safari 14 users on a still-shipped iPad get a transparent banner because the @supports block did not include a flat color first. Always declare a flat background, then the conic-gradient on the next line.

Citations

All CSS conic gradient version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Images Module Level 4: w3.org/TR/css-images-4
• MDN conic-gradient CSS function: developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
• MDN repeating-conic-gradient CSS function: developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient
• MDN gradient data type: developer.mozilla.org/en-US/docs/Web/CSS/gradient
• WebKit blog, CSS conic-gradient in Safari 12.1: webkit.org/blog/8475/release-notes-for-safari-technology-preview-71
• Mozilla Firefox 83 release notes: mozilla.org/en-US/firefox/83.0/releasenotes
• Chrome Platform Status, conic-gradient: chromestatus.com/feature/5189972363149312
• Chrome for Developers, CSS Color 4 in conic-gradient: developer.chrome.com/blog/css-color-mix
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support