repeating-radial-gradient() function
Specifies a radial gradient, in which colors transition smoothly from a single point, and then spread outward in a circle or ellipse, repeating infinitely. A radial gradient is specified by first defining a center point, then the size and shape (if an ellipse) of the final—or 100%—circle or ellipse, and then the color stops in between, separated by commas.
 |
Syntax
repeating-radial-gradient
([ [
<shape>
||
<size>
] [ at
<position>
] ? , | at
<position>
, ] ?
<color-stop>
[ ,
<color-stop>
] +)
Parameters
- position
-
Optional value that specifies the center of the gradient. This value can take the same values as the background-position property. If this value is omitted, it defaults to center.
- shape
-
Optional value that specifies the ending shape of the gradient. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise.
Value Meaning - ellipse
Indicates gradient is in the shape of an ellipse.
- circle
Indicates gradient is in the shape of an circle.
- size
-
Optional value that specifies the size of the gradient's ending shape. If this value is omitted, it defaults to farthest-corner.
- color-stop
-
At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.
The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.
The second component is an optional percentage or decimal value that indicates where along the gradient ray (similar to a gradient line in a linear-gradient, but from the center outward) to place the color stop. "0%" indicates the start of the gradient ray, and "100%" indicates the point where the gradient ray intersects the ending shape. For instance, a value of "20%" indicates the color stop should be placed at a point 20% of the length of the gradient ray, starting from the beginning of the line. Values can be negative, which indicates that the specified color for that value is at mid-transition to the next color at the center of the gradient, so the visible color at the center will be somewhere between the specified color and the next color. Values can be greater than 100%, which specifies a location a correspondingly greater distance from the center of the gradient.
Remarks
As of Microsoft Edge CSS Gradient Midpoints, or color hints, are supported. With CSS Gradient Midpoints, you can specify an optional location between the color stops of a CSS gradient. The color will always be exactly between the colors of the two stops at that point. Other colors along the gradient line are calculated using an exponential interpolation function. Check out the CSS Gradient Midpoints demo.
Once the last color stop has been reached, the gradient starts again at the first color stop and repeats. It's a good idea to specify identical colors for the first and last color stops to prevent abrupt color changes between each repeating group.
The syntax for the repeating-radial-gradient function is identical to that of the radial-gradient function.
Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) gradients functions. They are supported unprefixed in Internet Explorer 10 and later.
As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-repeating-radial-gradient" as an alias for this property. However when using the "-webkit-" prefixed property, the syntax is slightly different. Please refer to Safari Developer Library documentation: Using Gradients for the correct syntax.
Examples
The following declaration creates a repeating circular gradient.
background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);
The following declaration creates a repeating elliptical gradient.
background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);
See also