CSS repeating-radial-gradient() Function
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.
<!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.
<!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
CSS repeating-radial-gradient() Function – FAQs
What does the repeating-radial-gradient() function do in CSS?
The repeating-radial-gradient() function creates a repeating radial gradient, extending the radial pattern infinitely from the center.
How do you use repeating-radial-gradient() in CSS?
Use background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, …); to create a repeating pattern radiating from the center.
Can I adjust the repetition size in repeating-radial-gradient()?
The size of each repeated pattern is determined by the spacing of color stops, allowing control over how frequently the pattern repeats.
What are common applications of repeating-radial-gradient()?
This function is useful for creating backgrounds, decorative patterns, and effects like concentric circles or rings.
Does repeating-radial-gradient() work with transparency?
Yes, repeating radial gradients can incorporate transparency using colors with alpha values or CSS keywords like rgba and hsla.
