How to create linear gradient background using CSS?

CSS Web Development Front End Technology

Linear gradient background in CSS is a design technique used to create a smooth transition between two or more colors in a single element. It is defined using the CSS background-image property and the lineargradient() function.

Linear gradient Properties in CSS

to − it specifies the direction of the gradient
color-stops − It specifies the colors used in the gradient and their position.
repeating-linear-gradient − Creates a repeating gradient, where the gradient pattern is repeated horizontally or vertically.
background-size − It specifies the size of the gradient background.
background-clip − It specifies the area of the element that the gradient background should cover.
background-origin − It specifies the origin of the gradient background.
background-attachment − It specifies whether the gradient background should be fixed or scroll with the rest of the page.
background-position − It specifies the position of the gradient background within the element.

Create Linear Gradient Background using CSS

Linear gradient is a popular background effect in web design, as it adds depth and texture to any element. It can be easily done using CSS, without the need for images or complex design software. In this article, we will explore how to create a linear gradient background using CSS.

Steps

By using the following steps, we can easily create Linear gradient background in HTML and CSS.

Step 1: Define the Gradient

In this step we define the gradient. To create the linear gradient we use the CSS background property and the linear-gradient() function.

Step 2: Apply the Gradient to an Element

After defining the gradient, we apply it to the HTML element.

Step 3: Customize the Gradient

The gradient can be easily customized to suit the design needs. We can change the direction of the gradient by changing the value of the to keyword.

Example 1

In this example, the gradient applies to the body element using a CSS style block in the head section of the HTML document.

<html>
   <head>
      <title>Example to create linear gradient background using CSS</title>
      <style>
         body {
            background: linear-gradient(to right, #ff0000, #ffff00);
         }
      </style>
   </head>
   <body>
      <h2>Creating linear gradient background using CSS </h2>
      <p>This is a sample HTML document with a linear gradient background.</p>
   </body>
</html>

In the above example, the CSS linear-gradient function is used to create a gradient that starts from the color red (#ff0000) and goes to yellow (#ffff00) from left to right (to right). The gradient is applied to the body element using a CSS style block in the head section of the HTML document.

Example 2

In this example, the gradient will apply to the .container element, and will act as a container for the text content.

<html>
   <head>
      <title>Example to create linear gradient background using CSS</title>
      <style>
         body{
            text-align:center;
         }
         .container {
            height: 200px;
            background: linear-gradient(to bottom, #ff0000, #ffff00);
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h2>Creating linear gradient background using CSS </h2>
         <p>This is a sample HTML document with a linear gradient background.</p>
      </div>
   </body>
</html>

In the above example, a CSS class named .container is created and applied to a div element in the HTML body. The CSS linear-gradient function is used to create a gradient that starts from the color red (#ff0000) and goes to yellow (#ffff00) from top to bottom (to bottom).

Example 3

In this example, the gradient will apply to the .header element

<html>
   <head>
      <title>Example to create linear gradient background using CSS</title>
      <style>
         .header {
            height: 50px;
            background: linear-gradient(45deg, #ff0000, #ffff00);
         }
      </style>
   </head>
   <body>
      <div class="header"></div>
      <h2>Creating linear gradient background using CSS </h2>
      <p>This is a sample HTML document with a linear gradient background.</p>
   </body>
</html>

In the above example, a CSS class named .header is created and applied to a div element in the HTML body. The CSS linear-gradient function is used to create a gradient that starts from the color red (#ff0000) and goes to yellow (#ffff00) at a 45 degree angle (45deg). The gradient is applied to the .header element, which has a height of 100 pixels and acts as the header section of the page.

Conclusion

Creating a linear gradient background with CSS is a simple and efficient way to add depth and texture to the web designs. With just a few lines of code.