CSS | radial-gradient() Function - GeeksforGeeks

30 Jul, 2021
The radial-gradient() function is an inbuilt function in CSS which is used to set a radial gradient as the background image. It starts at a single point and emanates outward. By default, the first color starts at the center position of the element and then fade to the end color towards the edge of the element. Fade happens at an equal rate until specified.Syntax:  
background-image: 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 radial-gradient() function in CSS:Program 1:  
html
<!DOCTYPE html><html>    <head>        <title>CSS Gradients</title>        <style>            #main {                height: 250px;                width: 600px;                background-color: white;                background-image: radial-gradient(#090, #fff, #2a4f32);            }            .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:  
Program 2:  
html
<!DOCTYPE html><html>    <head>        <title>CSS Gradients</title>        <style>            #main {                height: 400px;                width: 600px;                background-color: white;                background-image: radial-gradient(circle, green, white, blue);            }            .gfg {                text-align:center;                font-size:40px;                font-weight:bold;                padding-top:155px;            }            .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
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
CSS-Functions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property