CSS Radial Gradients

Last Updated : 20 Sep, 2023

CSS Radial Gradients is an inbuilt function of CSS that is used to create a progressive transition between two or more colors. It starts from the origin and its shape may be a circle or ellipse.

By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified. We can also achieve a repeating effect that fills its container by utilizing the repeating-radial-gradient() function.

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 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.

Example: In this example, we will use the simple gradient.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS Gradients</title> 
    <style> 
        #main { 
            height: 250px; 
            width: 600px; 
            background-color: white; 
            background-image: 
                radial-gradient(rgb(17, 255, 0) 0%,  
                                transparent 20%,  
                                rgb(28, 148, 28) 40%); 
        } 
  
        .content { 
            text-align: center; 
            font-size: 40px; 
            font-weight: bold; 
            padding-top: 80px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="main"> 
        <div class="content"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Screenshot-(39)

Example 2: In this example, we will use a Non-Centered Gradient. In this example, the gradient will change from top to bottom.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS Gradients</title> 
    <style> 
        #main { 
            height: 250px; 
            width: 600px; 
            background-color: white; 
            background-image: 
                radial-gradient(ellipse at top left,  
                                #9eee9a, #165e21); 
        } 
  
        .content { 
            text-align: center; 
            font-size: 40px; 
            font-weight: bold; 
            padding-top: 80px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="main"> 
        <div class="content"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Screenshot-(40)

Example 3: In this example, we will repeat the radial gradient.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS Gradients</title> 
    <style> 
        #main { 
            background:  
              repeating-radial-gradient(circle, #00ff84,  
                                        #2eeb2e 50px,  
                                        #168c45 100px); 
            width: 300px; 
            height: 300px; 
        } 
  
        .content { 
            text-align: center; 
            font-size: 40px; 
            font-weight: bold; 
            padding-top: 80px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="main"> 
        <div class="content"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html>