repeating-radial-gradient() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

Editor