The repeating-conic-gradient() CSS function is a powerful tool for creating smooth, repeating conical patterns around a central point, often producing effects similar to pie charts, spinning wheels, or radial stripes. Unlike linear or radial gradients, which transition along a straight line or from a center point outward, a conic gradient rotates colors around a center, with color stops defining where each color starts and ends in a circular motion. The "repeating" aspect means that after a defined segment of the gradient, the pattern repeats infinitely around the circle, making it especially useful for creating striped or patterned backgrounds without manually repeating sections.

The gradient radiates from a central point (by default the center of the element), and the angles between color stops determine the width of each colored section. This function can be combined with other background properties like background-size or background-repeat to create seamless patterns across elements. It can also be layered with linear-gradient() or radial-gradient() for more complex visual effects.

For example, to create a simple spinning wheel effect with alternating black and white segments:

.spinner {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    black 0deg 30deg,
    white 30deg 60deg
  );
}

Here, the black and white segments repeat every 60 degrees, producing a consistent radial stripe pattern.

The repeating-conic-gradient() is particularly effective for decorative backgrounds, loader animations, or visually indicating percentages in circular charts. Its behavior can be fine-tuned with the center position, angle adjustments, and color stop spacing, giving designers precise control over the visual rhythm of the pattern.