The repeating-radial-gradient()
CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient()
and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the <gradient>
data type, which is a special kind of <image>
.
With each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition.
As with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
Because <gradient>
s belong to the <image>
data type, they can only be used where <image>
s can be used. For this reason, repeating-radial-gradient()
won't work on background-color
and other properties that use the <color>
data type.
/* A repeating gradient at the center of its container, starting red, changing to blue, and finishing green */ repeating-radial-gradient(circle at center, red 0, blue, green 30px);
<position>
background-position
or transform-origin
. If unspecified, it defaults to center
.<shape>
circle
(meaning that the gradient's shape is a circle with constant radius) or ellipse
(meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse
.<extent-keyword>
Keyword | Description |
---|---|
closest-side | The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
closest-corner | The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. |
farthest-side | Similar to closest-side , except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
farthest-corner | The gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. |
Note: Early implementations of this function included other keywords (cover
and contain
) as synonyms of the standard farthest-corner
and closest-side
, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.
<color-stop>
<color>
value, followed by an optional stop position (either a <percentage>
or a <length>
along the gradient's axis). A percentage of 0%
, or a length of 0
, represents the center of the gradient; the value 100%
represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray.repeating-radial-gradient( [[ circle || <length> ] [at <position>]? , | [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , | [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | at <position> , <color-stop> [ , <color-stop> ]+ ) \---------------------------------------------------------------/\--------------------------------/ Contour, size and position of the ending shape List of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]?
.radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); }
.radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); }
Note: Please see Using CSS gradients for more examples.
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'repeating-radial-gradient()' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 26
|
12 | 16
|
10 | 12.1
|
6.1
|
at syntax |
26 | 12 | 16
|
10 | 15
|
No |
Interpolation Hints / Gradient Midpoints | 40 | No | 36 | No | 27 | 6.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 4.4
|
26
|
Yes | 46 | 12.1
|
7.1 | Yes |
at syntax |
Yes | Yes | Yes | 16
|
No | No | Yes |
Interpolation Hints / Gradient Midpoints | 40 | 40 | No | 36 | Yes | Yes | Yes |
radial-gradient()
, linear-gradient()
, repeating-linear-gradient()
<image>
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient