How to use the CSS conic-gradient() function?

conic-gradient() creates a conical color transition rotating around the center point, suitable for pie charts, color wheels or decorative circular designs implemented in pure CSS; 1. Unlike linear-gradient() and radial-gradient(), colors are arranged clockwise from the top along the circle; 2. The basic syntax is background: conic-gradient(color1, color2, ...); 3. The starting angle can be set through from(), such as from 45deg; 4. Use percentage color scales to control each segment color range, such as red 0 70% means red accounts for 70% circumference; 5. Create gaps between segments by inserting transparent or background color segments (such as 1%); 6. Combining background-size and background-position It can simulate ring graph effects; 7. It is supported by modern browsers, but not by IE. It can detect features through @supports and provide alternative styles; this method can realize simple data visualization without images or JavaScript, which is complete and efficient.

The conic-gradient() function in CSS is used to create a gradient that rotates around a center point, with colors transitioning in a circular, cone-like pattern. It's especially useful for creating pie charts, color wheels, or decorative radial designs directly in CSS—no images or JavaScript required.

Here's how to use it effectively.

What conic-gradient() does

Unlike linear-gradient() (which goes side to side) or radial-gradient() (which spreads outward from a center), conic-gradient() places colors around a circle, starting from the top and moving clockwise.

Basic syntax:

 background: conic-gradient(color1, color2, ...);

Example:

 div {
  width: 200px;
  height: 200px;
  background: conic-gradient(red, yellow, lime, blue);
  border-radius: 50%;
}

This creates a circular gradient that looks like a color wheel sliced into four sections.

Control the starting angle and rotation

By default, the gradient starts at the top (0deg). You can change this using the from() syntax.

 background: conic-gradient(from 45deg, red, blue, green);

This rotates the entire gradient so it starts at 45 degrees (top-right).

You can also define how much each color takes up by specifying color stops:

 background: conic-gradient(from 90deg, red 0 25%, yellow 25% 50%, lime 50% 75%, blue 75% 100%);

This creates four equal 90-degree slices, starting from the right side.

? Think of each color as occupying a "wedge" — the percentage defines how much of the circle it covers.

Create a pie chart with conic-gradient

You can simulate a pie chart by assigning precision color stops.

Example: A pie chart with 70% red, 20% yellow, 10% green:

 .pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red 0 70%,
    yellow 70% 90%,
    green 90% 100%
  );
}

No extra HTML or JS — just pure CSS. Great for simple data visualizations.

Add gaps or borders between segments

To add space between slices (like a donut chart with gaps), use multiple backgrounds or layer shadows, but a simpler trick is to insert thin contrasting segments:

 background: conic-gradient(
  red 0 69%,
  transparent 69% 70%,
  yellow 70% 89%,
  transparent 89% 90%,
  green 90% 99%,
  transparent 99% 100%
);

This creates 1% transparent gaps between each color — use white or background color instead of transparent if you want visible borders.

Combine with background-size and border-radius

To make the gradient appears as a ring (donut style), you can layer it over another background:

 .donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    conic-gradient(red 0 30%, yellow 30% 70%, lime 70% 100%),
    white; /* Center color */
  background-size: 80% 80%; /* Shrink gradient to create a hole */
  background-position: center;
  background-repeat: no-repeat;
}

Alternatively, use a pseudo-element or padding trick for a true ring effect.

Browser support and fallbacks

conic-gradient() is supported in all modern browsers (Chrome, Firefox, Safari, Edge), but not in Internet Explorer .

If you need fallbacks:

 .fallback {
  background: red; /* Fallback color */
  background: conic-gradient(red, blue);
}

Or use @supports for feature detection:

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

Basically, conic-gradient() is powerful for circular designs when you need color weddings. Use it with border-radius: 50% for circles, control slices with stop percentages, and tweak the start angle as needed. It's not for everyone, but when you need a quick pie slice or color wheel, it's surprisingly capable.

The above is the detailed content of How to use the CSS conic-gradient() function?. For more information, please follow other related articles on the PHP Chinese website!