Open In App

CSS repeating-radial-gradient() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The repeating-radial-gradient() function is an inbuilt function in CSS that 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 the gradient. It has two possible value circles or ellipses. The default shape value is an ellipse.
  • size: This parameter is used to define the size of the gradient. The possible value 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 the 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: In this example, The #main element applies a repeating radial gradient background from blue to white to green.

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: In this example, The #main element applies a repeating radial gradient background in a circular shape from blue to white to green.

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
  • Microsoft Edge 12
  • Firefox 16
  • Opera 12.1
  • Safari 7


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads