CSS repeating-radial-gradient() Function
Example
Repeating radial gradient:
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Definition and Usage
The repeating-radial-gradient() function is used to create a repeating radial gradient "image".
Supported Versions: CSS3
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
Numbers prefixed with "webkit" or "moz" or "o" indicate the first version that supported the function with a prefix.
| Function | |||||
|---|---|---|---|---|---|
| repeating-radial-gradient() | 26.0 <br>10.0 -webkit- | 10.0 | 16.0 <br>3.6 -moz- | 6.1 <br>5.1 -webkit- | 12.1 <br>11.1 -o- |
CSS Syntax
background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
| Value | Description |
|---|---|
| shape | Defines the shape of the gradient. Can be: ellipse (default): Specifies an elliptical radial gradient <br> circle: Specifies a circular radial gradient |
| size | The specific position of the outline. Can be: farthest-corner (default): Specifies the radius length of the radial gradient as the distance from the center to the farthest corner. <br> closest-side: Specifies the radius length of the radial gradient as the distance from the center to the closest side. <br> closest-corner: Specifies the radius length of the radial gradient as the distance from the center to the closest corner. <br> farthest-side: Opposite of closest-side, specifies the radius length of the radial gradient as the distance from the center to the farthest side. |
| position | The center position of the circle, similar to background-position or transform-origin. Default is "center" |
| start-color, ..., last-color | Specifies the start and end colors of the gradient. Length values or percentages can be used to specify the color stops, but negative values are not allowed. |
CSS Tutorial: CSS3 Gradients