The conic-gradient() CSS function creates a gradient that is rotated around a central point, producing a conical or pie-like effect. Unlike linear or radial gradients, where color transitions follow a straight line or radiate outward in a circle, conic-gradient() transitions colors around an angle, starting from a specified point, typically the center of the element. This allows designers to simulate effects like pie charts, color wheels, or circular progress indicators with smooth, angular color blending.

Colors in conic-gradient() can be defined with stops at specific angles, letting you control where each color starts and ends. By default, the gradient begins at the top of the circle (12 o’clock position), but you can rotate it using a starting angle. You can also specify the central point of the gradient, which accepts values similar to position coordinates (e.g., center, top left, or exact lengths/percentages).

For example, you could create a simple color wheel effect:

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

This will generate a circular element where colors transition smoothly around the center.

conic-gradient() is often combined with radial-gradient() or linear-gradient() for more complex layered backgrounds. Additionally, you can animate it by changing the starting angle over time to create rotating effects or dynamic pie charts.

The function is widely supported in modern browsers and provides a powerful tool for creating circular and angular visual effects purely with CSS, without relying on images or SVGs.