Skip to content
Related Articles

Related Articles

CSS | repeating-radial-gradient() Function

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 01 Jul, 2022

The repeating-radial-gradient() function is an inbuilt function in CSS which is used to repeat radial gradients.
Syntax: 
 

background-image: repeating-radial-gradient(shape size at position, 
start-color, ..., last-color); 

Parameters: This function accepts many parameters which are listed below: 
 

  • shape: This parameter is used to define the shape of gradient. It has two possible value circle or ellipse. The default shape value is ellipse.
  • size: This parameter is used to define the size of gradient. The possible value are: farthest-corner (default), closest-side, closest-corner, farthest-side.
  • position: This parameter is used to define the position of 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.

Below example illustrates the repeating-radial-gradient() function in CSS:
Example: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>CSS Gradients</title>
        <style>
            #main {
                height: 250px;
                width: 600px;
                background-color: white;
                background-image: repeating-radial-gradient(blue,
                white 10%, green 15%)
            }
            .gfg {
                text-align:center;
                font-size:40px;
                font-weight:bold;
                padding-top:80px;
            }
            .geeks {
                font-size:17px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">A computer science portal for geeks</div>
        </div>
    </body>
</html>                    

Output: 
 

Example 2: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>CSS Gradients</title>
        <style>
            #main {
                height: 400px;
                width: 400px;
                background-color: white;
                background-image: repeating-radial-gradient(circle,
                blue, white 10%, green 15%)
            }
            .gfg {
                text-align:center;
                font-size:40px;
                font-weight:bold;
                padding-top:170px;
            }
            .geeks {
                font-size:17px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">A computer science portal for geeks</div>
        </div>
    </body>
</html>                    

Output: 
 

Supported Browser:

  • Google Chrome 26
  • Edge 12
  • Internet Explorer 10
  • Firefox 16
  • Opera 12.1
  • Safari 7

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!