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
10	12	26	16	12.1	6.1
Tablets / Mobile
≤37	26	16	12.1	6.1	Yes

Last updated by CSSPortal on: 1st December 2019