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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
04 Aug, 2023
Like Article
Save Article