repeating-radial-gradient() CSS Function

Description

The CSS repeating-radial-gradient() function creates an image consisting of repeating radial gradients that radiate from an origin. It is similar to the radial-gradient() function, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to the repeating-linear-gradient() function.

The parameters for the repeating-radial-gradient() function are as follows:

shape: This parameter is used to define the shape of the gradient. It has two possible values: circle or ellipse. The default shape value is ellipse.
size: This parameter is used to define the size of the gradient. The possible values are:
- farthest-corner (default)
- closest-side
- closest-corner
- farthest-side
position: This parameter is used to define the position of the gradient. The default value is center.
start-color, ..., last-color: This parameter is used to hold the color value followed by its optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

Here is an example of how to use the repeating-radial-gradient() function to create a repeating polka dot background:

body {
  background-image: repeating-radial-gradient(circle at center, blue 0%, white 50%);
}

This will create a background with blue dots that repeat infinitely in all directions.

The repeating-radial-gradient() function can be used to create a variety of interesting and unique visual effects. It is a powerful tool that can be used to add depth and interest to web pages.

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

HTML

<div class="example">Repeating radial gradient example.</div>

CSS

.example {

    background: repeating-radial-gradient(green 20%, red 40%);

    padding: 30px;

    margin: 10px;

    height: 200px;

    font-size: 1.5em;

    text-align: center;

}

Result