repeating-radial-gradient() CSS Function

Description

The repeating-radial-gradient() CSS function is similar to a radial gradient, which is done by the radial-gradient() function, and has a similar syntax with it. But the colors of the gradient endlessly repeat in all directions, forming a pattern that fills the background of the element.

Syntax

repeating-radial-gradient( 
       [[ circle  || <length> ]                     [at <position>]? , | 
        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
                                                     at <position>   ,    <color-stop-list> )
        ---------------------------------------------------------------/-----------------/
                  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-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> 
   and <linear-color-stop> = <color> [ <color-stop-length> ]? 
   and <color-stop-length> = [ <percentage> | <length> ]{1,2} 
   and <color-hint> = [ <percentage> | <length> ]

Values

  • <position>The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.
  • <shape>The gradient's shape. The value can be 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>A keyword describing how big the ending shape must be. The possible values are:
    • closest-side
    • closest-corner
    • farthest-side
    • farthest-corner
  • <color-stop>A color-stop's <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 virtual gradient ray.

Example

<div class="example">Repeating radial gradient example.</div>
.example {
background: repeating-radial-gradient(green 20%, red 40%);
padding: 30px;
margin: 10px;
height: 200px;
font-size: 1.5em;
text-align: center;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
?????Yes