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);
  }
}

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 that do not carry meaning a screen reader has to announce.
• 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.

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