CSS repeating-conic-gradient() Function
Example
Create a repeating conic gradient:
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
Try it Yourself »
Definition and usage
The repeating-conic-gradient() function is used to create a repeating conic gradient.
Supported version: CSS3
Browser Support
The numbers in the table indicate the first browser version number that supports the function.
| Function | |||||
|---|---|---|---|---|---|
| repeating-conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS Syntax
background-image: repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
| Value | Description |
|---|---|
| from angle | Optional. The starting angle. Default value is 0deg. |
| at position | Optional. Center position. Default is centered. |
| color degree, ..., color degree | Conic gradient stops. The value contains a color value followed by an optional stop position (a degree between 0 and 360 or a percentage between 0% and 100%). |
More Examples
Example
Sets a repeating conic gradient with a start color and a stop color:
#grad {
background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}
Try it Yourself »
other extensions