CSS Conic Gradients

CSS Conic Gradients

The CSS conic-gradient() function creates color transitions that rotate around a center point.

Unlike linear gradients, which transition along a straight line, or radial gradients, which extend outward from a center point, conic gradients transition around the center. You can control their starting angle, center position, colors, color stops, hard transitions, and transparency.

Basic conic-gradient()

A basic conic gradient requires at least two colors.

.box {
  background-image: conic-gradient(steelblue, lightblue, steelblue);
}

By default, the center of the gradient is located at the center of the element. The colors transition around that center point rather than across the element or outward from its center.

Conic gradients are particularly useful when the visual effect needs to follow an angular or circular path.

Starting Angle

The from keyword changes the angle where the conic gradient begins.

.box {
  background-image: conic-gradient(
    from 90deg,
    steelblue,
    lightblue,
    steelblue
  );
}

By default, a conic gradient begins at 0deg, which points upward from the center. Positive angles rotate clockwise.

Gradient Position

The center point of a conic gradient can be moved using the at keyword followed by a position.

.box {
  background-image: conic-gradient(
    at 30% 40%,
    steelblue,
    lightblue,
    steelblue
  );
}

The first percentage controls the horizontal position and the second controls the vertical position.

The starting angle and center position can also be used together.

.box {
  background-image: conic-gradient(
    from 45deg at 30% 40%,
    steelblue,
    lightblue,
    steelblue
  );
}

Multiple Colors

A conic gradient can contain multiple colors placed around its center point.

.box {
  background-image: conic-gradient(
    steelblue,
    lightblue,
    white,
    lightblue,
    steelblue
  );
}

When explicit positions are not provided, the browser distributes the color stops around the gradient.

Color Stop Positions

Color stop positions control where colors occur as the gradient rotates around its center.

.box {
  background-image: conic-gradient(
    steelblue 0deg,
    lightblue 120deg,
    white 240deg,
    steelblue 360deg
  );
}

Conic gradient stops can use angles such as degrees as well as percentages. A complete turn is 360deg, which corresponds to 100%.

Changing the position of a color stop changes the amount of the gradient used for the transitions on either side of that stop.

Hard Color Stops

Hard color stops can divide a conic gradient into clearly defined angular sections rather than smooth color transitions.

.box {
  background-image: conic-gradient(
    steelblue 0deg 120deg,
    lightblue 120deg 240deg,
    navy 240deg 360deg
  );
}

Each color occupies a specific angular range. Because one color ends at the same position where the next begins, there is no space for the colors to blend.

This makes hard stops especially useful for creating wedges, segmented circles, color wheels, and other angular patterns.

Transparent Gradients

Conic gradients can include colors with alpha transparency just like linear and radial gradients.

.box {
  background-image: conic-gradient(
    rgb(0 136 204) 0deg,
    rgb(0 136 204 / 0%) 180deg,
    rgb(0 136 204) 360deg
  );
}

The gradient begins opaque, becomes transparent halfway around the center, and returns to the opaque color at the end of the rotation.

Placing a transparent conic gradient over another background makes the changing alpha values easier to see and allows layered effects to be created.

Conic Gradient Uses

Conic gradients are well suited to designs based on angles and rotation. Hard color stops can divide the gradient into separate sections, while smooth transitions can create circular blends.

Common visual uses include segmented circles, decorative color wheels, circular patterns, and layered background effects.

Although conic gradients can visually resemble pie or progress charts, meaningful data should not rely on a CSS background alone. Data should remain available as accessible text or appropriate document content.

Conic Gradient Example

The following example compares a normal conic gradient, hard color stops, and a transparent conic gradient. Open the example in the editor and change the colors, angles, stop positions, or center position to see how each type behaves.

.normal {
  background-image: conic-gradient(
    steelblue,
    lightblue,
    steelblue
  );
}
.hard-stops {
  background-image: conic-gradient(
    steelblue 0deg 120deg,
    lightblue 120deg 240deg,
    navy 240deg 360deg
  );
}
.transparent {
  background-image: conic-gradient(
    rgb(0 136 204) 0deg,
    rgb(0 136 204 / 0%) 180deg,
    rgb(0 136 204) 360deg
  );
}