Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create linear gradient background using CSS ?

  • Last Updated : 03 Aug, 2021

In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitions between two or more colors.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Parameters:

  • direction: Specify the direction of the transition. The default value is 180deg (if not specified).
  • color1: Specify the first color.
  • color2: Specify the second color.

Note: You can specify as many colors as you want.



 

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        /* Remove the default padding and 
           margin of all HTML tags */
        * {
            margin: 0;
            padding: 0;
        }
  
        /* Implementation of linear-gradient property */
        #lin_grad {
            
            /* Set the height of the div to 
               the entire screen */
            height: 100vh;  
  
            /* linear-gradient syntax */
            background-image: linear-gradient(lightblue, darkblue); 
        }
    </style>
</head>
  
<body>
    <div id="lin_grad"></div>
</body>
  
</html>

Output:

Example 2: This demonstrates the setting of direction. In the above HTML code, just change the “background-image” property value in the CSS part of the head section as given below.

Syntax: 

background-image: linear-gradient(to right, lightblue, darkblue)

Output:



 

Example 3: This demonstrates the setting of direction in degree. In the above HTML first code, just change the “background-image” property value in the CSS part of the head section as given below.

Syntax:

background-image: linear-gradient(135deg, white, lightgreen, darkblue);

Output:

Example 4: This demonstrates the setting of the position for each color. If you don’t specify the location of a color, it is placed halfway between its preceding color and the color that follows it. The two gradients given below are equivalent. In the above HTML first code, just change the “background-image” in the CSS part of the head section as given below.

Syntax:

background-image: linear-gradient(90deg, white, lightgreen, darkblue)
background-image: linear-gradient(90deg, white 0%, 
        lightgreen 50%, darkblue 100%)

Output:

Let us change the % value of the light green color and see what happens.

Syntax:

background-image: linear-gradient(90deg, white 0%, 
    lightgreen 80%, darkblue 100%)

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!