CSS | repeating-radial-gradient() Function
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
Please Login to comment...