CSS conic-gradient() Function

CSS conic-gradient() Function

The CSS conic-gradient() function creates a gradient in which colors transition around a center point. Unlike linear gradients, which follow a straight line, or radial gradients, which extend outward from a center, conic gradients change color as the angle rotates around the center. They are useful for color wheels, pie-chart-style graphics, progress indicators, and decorative backgrounds.

Syntax

conic-gradient(color1, color2)
conic-gradient(from angle, color1, color2)
conic-gradient(at position, color1, color2)
conic-gradient(from angle at position, color1, color2)
conic-gradient(in color-space, color1, color2)

The function requires at least two color stops. An optional starting angle, center position, and color interpolation method can control how the gradient appears.

For example:

.example {
  background: conic-gradient(red, yellow, blue);
}

This creates a gradient that transitions from red through yellow and blue while rotating around the center of the element.

To change the starting angle:

.example {
  background: conic-gradient(from 90deg, red, yellow, blue);
}

To change the center position:

.example {
  background: conic-gradient(at 25% 50%, red, yellow, blue);
}

Additional examples:

conic-gradient(red, blue)
conic-gradient(red 0deg, blue 180deg, red 360deg)
conic-gradient(from 45deg, red, blue)
conic-gradient(at center, red, blue)
conic-gradient(from 90deg at top left, red, blue)
conic-gradient(in oklab, red, blue)
conic-gradient(red 0% 50%, blue 50% 100%)

The function produces a CSS <image> value and is commonly assigned to background-image or the background shorthand property.

Parameters

The conic-gradient() function supports optional settings followed by a list of color stops.

For example:

conic-gradient(from 45deg at center, red 0%, yellow 50%, blue 100%)

This gradient begins at 45 degrees, uses the center of the element, and distributes its colors across one full revolution.

The starting angle, position, and interpolation method are optional. Color stops are required.

How It Works

A conic gradient calculates colors according to their angular position around a center point.

By default, the gradient starts at the top of the element and progresses clockwise.

For example:

.box {
  width: 200px;
  height: 200px;
  background: conic-gradient(red, blue);
}

The gradient begins with red at the top, transitions toward blue while moving clockwise, and ends at blue after one complete revolution.

Angles follow these positions:

The colors change around the center, not according to their distance from it.

Because the beginning and end of the gradient meet at the same direction, a visible seam may appear if the first and last colors differ.

To create a smooth transition at that boundary, repeat the starting color at the end:

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

Color Stops

Color stops determine which colors appear at particular positions around the gradient.

They can use angles or percentages.

For example:

background: conic-gradient(red 0deg, yellow 180deg, blue 360deg);

This places red at 0 degrees, yellow at 180 degrees, and blue at 360 degrees.

The same positions can be expressed as percentages:

background: conic-gradient(red 0%, yellow 50%, blue 100%);

One complete revolution corresponds to 360 degrees or 100%.

If positions are omitted, the browser distributes the color stops according to the CSS gradient positioning rules.

For example:

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

This creates a full circular color transition with evenly distributed stops.

Starting Angle

The from keyword changes the angular position where the gradient begins.

For example:

background: conic-gradient(from 90deg, red, yellow, blue);

The starting direction moves from the top to the right side of the element.

Other examples:

conic-gradient(from 0deg, red, blue)
conic-gradient(from 90deg, red, blue)
conic-gradient(from 180deg, red, blue)
conic-gradient(from 270deg, red, blue)

The starting angle rotates the gradient pattern around its center.

CSS also supports other angle units:

conic-gradient(from 0.25turn, red, blue)
conic-gradient(from 100grad, red, blue)
conic-gradient(from 1.5708rad, red, blue)

These examples all start at approximately 90 degrees.

The from value changes the starting direction, while individual color-stop positions remain relative to that starting direction.

Center Position

The at keyword controls the center point around which the gradient rotates.

By default, the center is positioned at 50% 50%.

For example:

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

To move the center toward the upper-left corner:

background: conic-gradient(at 25% 25%, red, yellow, blue);

Other examples:

conic-gradient(at top left, red, blue)
conic-gradient(at top right, red, blue)
conic-gradient(at bottom left, red, blue)
conic-gradient(at bottom right, red, blue)
conic-gradient(at 75% 50%, red, blue)

The position can be combined with a starting angle:

background: conic-gradient(from 45deg at 25% 50%, red, yellow, blue);

Moving the center changes how the color transitions are distributed across the element.

The gradient still fills its background painting area, even when the center is positioned near an edge or corner.

Hard Color Stops

Conic gradients can create sharp boundaries instead of smooth transitions.

To create a hard boundary, place adjacent color stops at the same position.

For example:

background: conic-gradient(red 0% 50%, blue 50% 100%);

The first half of the circle is red, and the second half is blue.

Multiple hard boundaries can create pie-chart-style graphics:

background: conic-gradient(
  #0066cc 0% 40%,
  #ff9933 40% 70%,
  #33aa66 70% 100%
);

The three sectors occupy 40%, 30%, and 30% of the circle.

A color stop can also specify two positions:

background: conic-gradient(red 0deg 180deg, blue 180deg 360deg);

This is useful when creating solid-colored segments without transitions between them.

For meaningful charts, include accessible labels or a text-based representation of the data. A CSS background alone does not communicate the values to assistive technologies.

Color Hints

A color hint adjusts where the midpoint of a transition occurs between two color stops.

For example:

background: conic-gradient(red 0deg, 90deg, blue 360deg);

The 90-degree hint places the interpolation midpoint one-quarter of the way around the circle rather than halfway between the stops.

Without a hint:

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

The transition midpoint is at 180 degrees.

Hints can be expressed using percentages:

background: conic-gradient(red 0%, 25%, blue 100%);

A color hint is not itself a color stop. It modifies the interpolation between the surrounding stops.

Color Interpolation

Modern CSS allows conic gradients to interpolate colors in different color spaces.

For example:

background: conic-gradient(in srgb, red, blue, red);
background: conic-gradient(in oklab, red, blue, red);
background: conic-gradient(in oklch, red, blue, red);

Each expression uses the same colors but a different interpolation space.

Supported spaces include srgb, srgb-linear, lab, lch, oklab, oklch, and other supported CSS color spaces.

Polar color spaces support hue interpolation methods:

background: conic-gradient(in hsl shorter hue, red, blue);
background: conic-gradient(in hsl longer hue, red, blue);

The shorter hue method follows the shorter path around the hue circle, while longer hue follows the longer path.

The interpolation space can also be combined with the starting angle and center position:

background: conic-gradient(from 45deg at center in oklab, red, blue, red);

Explicit color interpolation syntax is newer than basic conic gradients and should be checked for compatibility when supporting older browsers.

Transparency

Conic gradients can include transparent colors to create overlays, highlights, and partially visible sectors.

For example:

background: conic-gradient(red, transparent, blue);

The gradient transitions through transparency between the colors.

Alpha values can also be used:

background: conic-gradient(
  rgb(0 102 204 / 100%),
  rgb(0 102 204 / 20%),
  rgb(0 102 204 / 100%)
);

This creates a blue gradient whose opacity changes around the center.

To create a transparent sector:

background: conic-gradient(
  #0066cc 0% 70%,
  transparent 70% 100%
);

The first 70% of the circle is blue, while the remaining 30% is transparent.

Transparent regions reveal any background layers or content behind the gradient.

Repeating Gradients

The related repeating-conic-gradient() function repeats a conic gradient pattern around its center.

For example:

background: repeating-conic-gradient(
  #0066cc 0deg 15deg,
  #fff 15deg 30deg
);

This creates alternating blue and white sectors, repeating every 30 degrees.

Repeating gradients are useful for striped circles, decorative patterns, and repeating angular segments.

The difference is that conic-gradient() defines a non-repeating gradient, while repeating-conic-gradient() repeats its specified pattern.

Example

The following example compares a smooth conic gradient, a gradient with a rotated starting angle, and a gradient with hard color stops.

HTML:

<div class="conic-demo">
  <div class="conic-demo-item">
    <span>Smooth Gradient</span>
    <div class="conic-demo-sample conic-smooth"></div>
  </div>
  <div class="conic-demo-item">
    <span>Starting at 90deg</span>
    <div class="conic-demo-sample conic-rotated"></div>
  </div>
  <div class="conic-demo-item">
    <span>Hard Color Stops</span>
    <div class="conic-demo-sample conic-segments"></div>
  </div>
</div>

CSS:

.conic-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.conic-demo-item {
  width: 140px;
  text-align: center;
}
.conic-demo-item span {
  display: block;
  margin-bottom: 10px;
}
.conic-demo-sample {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.conic-smooth {
  background: conic-gradient(red, yellow, green, blue, red);
}
.conic-rotated {
  background: conic-gradient(from 90deg, red, yellow, green, blue, red);
}
.conic-segments {
  background: conic-gradient(#0066cc 0% 40%, #ff9933 40% 70%, #33aa66 70% 100%);
}

The first example shows smooth color transitions, the second rotates the gradient by 90 degrees, and the third creates three solid-colored sectors.

The border-radius: 50% declaration makes the square elements appear circular. The conic gradient itself does not change the shape of the element.

Progress Indicator Example

A conic gradient can create a circular progress indicator by using a hard color stop.

In this example, 75% of the circle is blue and the remaining 25% is light gray.

HTML:

<div class="conic-progress" role="progressbar" aria-label="Task completion" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
  <span>75%</span>
</div>

CSS:

.conic-progress {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#0066cc 0% 75%, #e0e0e0 75% 100%);
}
.conic-progress span {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #fff;
  color: #0066cc;
  font-size: 24px;
  font-weight: bold;
}

The white inner circle creates the appearance of a ring, while the blue sector shows the completed percentage.

The role="progressbar" and ARIA attributes provide the progress value to assistive technologies. For a dynamic progress indicator, update both the visual gradient and aria-valuenow.

Comparing Gradient Functions

CSS provides several gradient functions that differ in how their colors transition.

For example:

background: linear-gradient(red, blue);
background: radial-gradient(red, blue);
background: conic-gradient(red, blue);

Each declaration uses the same two colors but creates a different visual result.

Common Uses

The conic-gradient() function is useful for circular graphics and angular color transitions.

For example, a simple color wheel can be created using:

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

Repeating the first color at the end helps avoid an abrupt transition where the gradient completes its revolution.

Limitations

The conic-gradient() function has several important rules and limitations.

• It requires at least two color stops.
• Color-stop positions use angles or percentages, not lengths such as pixels.
• The gradient creates an image and does not change the element's shape or layout dimensions.
• A visible seam may occur where the first and last colors meet.
• Hard color stops may show anti-aliasing artifacts along sector boundaries.
• Different color interpolation spaces can produce different visual results.
• CSS backgrounds do not provide accessible labels or values for meaningful charts.
• Gradients used as background images do not have intrinsic dimensions.

For example, this is valid:

background: conic-gradient(red 0deg, blue 180deg, red 360deg);

However, this is invalid because the color-stop positions use lengths:

background: conic-gradient(red 0px, blue 100px);

Use angles or percentages for conic gradient color-stop positions.

For content that communicates information, provide a text equivalent rather than relying on color alone.

Browser Support

The CSS conic-gradient() function is Baseline Widely available. Basic conic gradients have been supported across major browser engines since November 2020.

Advanced color interpolation syntax may have different compatibility requirements from the original function.

For a fallback, provide a solid background color before the gradient:

.example {
  background-color: #0066cc;
  background-image: conic-gradient(red, yellow, blue, red);
}

Browsers that do not support the gradient retain the background color.

You can also use @supports:

@supports (background-image: conic-gradient(red, blue)) {
  .example {
    background-image: conic-gradient(red, yellow, blue, red);
  }
}

For current compatibility information, visit Can I Use? .

Specifications

The conic-gradient() function is defined in the CSS Images Module Level 4 .

The specification defines angular color stops, starting angles, center positions, and how conic gradients are rendered.

Related functions include linear-gradient(), radial-gradient(), and repeating-conic-gradient().