Tutorialspoint.dev

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:



<!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:

<!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:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter