CSS Linear Gradient

Last Updated : 24 Aug, 2023

CSS Linear Gradient is an inbuilt function of CSS that is used to create a linear gradient between two or more colors. It creates a gradient along a straight line.

We have the option to specify a starting point and a direction (or angle) for the gradient effect. This gives the gradient’s orientation and determines in which direction the color will flow.

Syntax:

background-image: linear-gradient( direction, color1, color2, ... )

Parameters: This function accepts one direction parameter and many color parameters which are listed below:

direction: This parameter defines the starting point and direction along with the gradient effect.
color1, color2, …: This parameter is used to hold the color value followed by its optional stop position.

Example 1: In this example, we will see the use of a linear gradient.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS Linear Gradient</title> 
    <style> 
        .gradient { 
            height: 100px; 
            background-image: 
                linear-gradient(green, rgb(0, 247, 255),  
                                rgb(89, 89, 173)); 
            text-align: center; 
            padding-top: 40px; 
            font-size: 40px; 
            color: white; 
            font-weight: bold; 
        } 
  
        h2 { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gradient"> 
          GeeksforGeeks 
      </div> 
</body> 
  
</html>

Output:

Screenshot-(42)

Example 2: In this example, we will use a gradient at 45degree.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          CSS Linear Gradient 
      </title> 
    <style> 
        .gradient { 
            height: 100px; 
            background-image:  
              linear-gradient(45deg, rgb(128, 255, 0),  
                              rgb(40, 126, 78)); 
            text-align: center; 
            width: 400px; 
            padding-top: 40px; 
            font-size: 40px; 
            color: white; 
            font-weight: bold; 
        } 
  
        h2 { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gradient"> 
          GeeksforGeeks 
      </div> 
</body> 
  
</html>

Output:

Screenshot-(44)

Example 3: In this example, we will use a gradient with multiple positions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS Linear Gradient</title> 
    <style> 
        .gradient { 
            height: 100px; 
            width: 400px; 
            background: linear-gradient(to right, 
                    #e1ff00 0%, 
                    #00ff00 30%, 
                    #00ff9d 50%, 
                    #4ab17a 70%, 
                    #7ed1c4 100%); 
            Text-align: center; 
            padding-top: 40px; 
            font-size: 40px; 
            color: white; 
            font-weight: bold; 
        } 
  
        h2 { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gradient"> 
          GeeksforGeeks 
      </div> 
</body> 
  
</html>