CSS repeating-conic-gradient() function
- Previous Page CSS repeat() function
- Next Page CSS repeating-linear-gradient() function
- Go to the Previous Level CSS Function Reference Manual
Definition and usage
CSS repeating-conic-gradient()
The function is used for repeating conic gradients.
Example:
Conic gradient | Repeated conic gradient |
---|---|
conic-gradient(red, yellow); | repeating-conic-gradient(red 10%, yellow 20%); |
Example
Example 1
A repeating conic gradient:
#grad { background-image: repeating-conic-gradient(red 10%, yellow 20%); }
Example 2
A repeating conic gradient that defines the starting and ending points of the colors:
#grad { background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg); }
Example 3
Another repeating conic gradient with specified start angle and center position:
#grad1 { background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg); }
CSS syntax
repeating-conic-gradient([from angle], [at position,] color degree, color degree, ... );
Value | Description |
---|---|
from angle |
Optional. The entire conic gradient is rotated by this angle. Default is 0deg. |
at position |
Optional. Specifies the center point of the conic gradient. Default is center. |
color degree, ... , color degree |
The color termination point is the color you want to present with a smooth transition between them. This value consists of color values and one or two optional stopping points (angles between 0 to 360 degrees or percentages between 0% to 100%). |
Technical details
Version: | CSS Images Module Level 4 |
---|
Browser support
The numbers in the table represent the first browser version to fully support this function.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
69 | 79 | 83 | 12.1 | 56 |
Related pages
Tutorial:CSS gradient
Reference:CSS background-image Property
Reference:CSS conic-gradient() function
Reference:CSS linear-gradient() function
Reference:CSS radial-gradient() function
Reference:CSS repeating-linear-gradient() function
Reference:CSS repeating-radial-gradient() function
- Previous Page CSS repeat() function
- Next Page CSS repeating-linear-gradient() function
- Go to the Previous Level CSS Function Reference Manual