#     
The **`repeating-radial-gradient()` function** creates gradients in a repeated fashion, as shown in the image below.
* It is an in-built CSS function.
* It can be only used where images are used because this function returns a #key# `gradient` data type: This is a special kind of `image` #key#.


<!DOCTYPE html>
<html>
    <head>
        <title>CSS Gradients</title>
    </head>
    <body>
        <div id="gradient"></div>
    </body>
</html>




#gradient {
    height: 300px;
    width: 300px;
    background-color: white;
    background: repeating-radial-gradient(#e66465, #9198e5 20%);
}

codemirror

## Syntax
```css
background-image: repeating-radial-gradient(shape extent-keyword at position, 
color stops...); 
```
or
```css
background: repeating-radial-gradient(shape extent-keyword at position, 
color stops...); 
```

## Parameters
`repeating-radial-gradient` function accepts following parameters:

* `Shape`: The default shape is an ellipse, which can be replaced with only a circle.

* `Extent-Keyword`: It is used to specify the size of the ending shape . `farthest-corner` (default), `closest-side`, `closest-corner`, `farthest-side`.

* `Position`: It specifies the position where the gradient originates. The default is `center`.


```
repeating-radial-gradient(circle at center, red 0, blue, green 30px);
```
We can provide the position in percentages too.
```
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
```

* **Color stops:** These are used to specify the colors in the gradient. They also follow an optional stop position.


## Example 1
In the following code snippet:
* We created a `div` element which has a `gradient` to apply `repeating-radial-gradient`.

* We passed the `repeating-radial-gradient` function to a background CSS property to `gradient` `div` in `style` tag.

```
repeating-radial-gradient(circle at center, red 0, blue, green 30px);
 ```
* Here we passed the parameters to make the shape `circle`, the position `center` and color stops as `red`, `blue`, `green`.

* The gradient starts with `red`, changes to `blue`, and ends with `green`.

<!DOCTYPE html>
<html>
    <head>
        <title>Gradients</title>
        <style>
            #gradient {
                height: 300px;
                width: 300px;
                background-color: white;
                background: repeating-radial-gradient(circle at center, red 0, blue, green 30px);

            }
        

        </style>
    </head>
    <body>
        <div id="gradient">

        </div>
    </body>
</html>

## Example 2

In this example, we will try to animate the gradient. We will take the advantage of optional color-stop positions.
* In the following gradient, we used two shades of color stops, `pink` and `white`.

* We provided color-stops positions to white and pink as `0` and `100`.

* We will change the color stop position of pink from `100` to `0` and animate it using CSS animations.



<!DOCTYPE html>
<html>
    <head>
        <title>CSS Gradients</title>
        <style>
            #gradient {
                height: 300px;
                width: 300px;
                background-color: white;
                background-image: repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 100%);
                animation: colorChange 1s infinite;
            }
            @keyframes colorChange {
                0% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 100%);
                }
                10% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 90%);
                }
                20% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 80%);
                }
                30% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 70%);
                }
                40% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 60%);
                }
                50% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 50%);
                }
                60% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 40%);
                }
                70% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 30%);
                }
                80% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 20%);
                }
                90% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 10%);
                }
                100% {
                        background-image:repeating-radial-gradient(ellipse closest-side at center center,rgb(218, 218, 218) 0%,rgb(212, 126, 218) 10%);
                }
                
            }

        </style>
    </head>
    <body>
        <div id="gradient">

        </div>
    </body>
</html>




What is the CSS repeating-radial-gradient() function?

The CSS repeating-radial-gradient() function creates repeated radial gradients with customizable shapes, positions, and color stops.