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.
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; } .Beginner { font-size: 17px; text-align: center; } </ style > </ head > < body > < div id = "main" > < div class = "gfg" > w3wiki </ div > < div class = "Beginner" > A computer science portal for Beginner </ 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; } .Beginner { font-size: 17px; text-align: center; } </ style > </ head > < body > < div id = "main" > < div class = "gfg" > w3wiki </ div > < div class = "Beginner" > A computer science portal for Beginner </ div > </ div > </ body > </ html > |
Output:
Supported Browser:
- Google Chrome 26
- Edge 12
- Microsoft Edge 12
- Firefox 16
- Opera 12.1
- Safari 7