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

<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

The following table will show you the current browser support for the CSS repeating-radial-gradient() function.

Desktop
Edge Chrome Firefox Opera Safari
12261612.17
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
261612.171.54.4

Last updated by CSSPortal on: 7th October 2023