CSS repeating-conic-gradient() Function
Example
div {
background: repeating-conic-gradient(red 0%, yellow 15%, red 33%);
}Meaning
The repeating-conic-gradient() css function creates an image consisting of a repeating gradient with color transitions rotated around a center point.
Note: To create a conic gradient that does not repeat, make the gradient a full 360 degree rotation, or use the conic-gradient() function instead.
Version: CSS3
Standard Syntax
repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...)Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Function Arguments
The following table describes the arguments of this function.
| Argument | Description |
|---|---|
| from angle | Optional. Default value is 0deg. The entire conic gradient is rotated by this angle. |
| at position | Optional. Default value is center. Specifies the gradient center of the conic gradient. |
| color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
More Example
Example
.example1 {
background: repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}
.example2 {
background: repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
}
.example3 {
background: conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);
}
.example4 {
background: radial-gradient(red 33%, yellow 33% 66%, blue 66%);
}Example
div {
height: 200px;
width: 200px;
background: repeating-conic-gradient(red 0deg 10deg, green 10deg 20deg, blue 20deg 30deg);
}