CSS: Repeating Conic Gradient

By Xah Lee. Date: .

What is repeating-conic-gradient

repeating-conic-gradient let you specify repeated Conic Gradient.

Syntax

same as Conic Gradient. The last color stop should not be 100%, else there is no room to repeat.

basic example

.ppB2G {
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-image: repeating-conic-gradient(red, white 30deg);
}

alt black white

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

alt black white quadrant

.zMQj6 {
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-image: repeating-conic-gradient(black 0deg 90deg, white 90deg 180deg);
}

CSS Color

CSS conic gradient