CSS: Repeating Conic Gradient

what is repeating-conic-gradient

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

the syntax is the same as

• CSS: Conic Gradient

the last color stop at the end should be less than 100%, else there is no room 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);
}