Tutorialspoint.dev

CSS | radial-gradient() Function

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:



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

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



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter