CSS Linear Gradient

Last Updated : 17 Jun, 2024

CSS Linear Gradient is a built-in function that enables you to create smooth transitions between two or more colors along a straight line. This function is highly versatile, allowing you to specify the starting point and direction (or angle) of the gradient, thereby determining the flow of colors. Whether for backgrounds, borders, or text, linear gradients add depth and visual interest to web designs. This article will explore the syntax, parameters, and practical examples of using CSS linear gradients effectively.

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.

Examples

Example 1: Basic Linear Gradient

In this example, a simple linear gradient transitions from blue to red.

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: Linear Gradient at 45 Degrees

This example demonstrates a linear gradient applied at a 45-degree angle.

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: Linear Gradient with Multiple Colors

In this example, multiple colors are used to create a more complex gradient effect.

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>

Output:

Screenshot-(45)

Conclusion

CSS Linear Gradients allows developers to enhance the visual aesthetics of web pages by creating smooth, color-transitional backgrounds. By understanding the syntax and parameters, and practicing with various examples, you can create dynamic and engaging designs that improve user experience. As browser support for linear gradients is robust, you can confidently incorporate these effects into your web projects to achieve a modern and polished look.

By following the guidelines and examples provided in this article, you can effectively utilize CSS Linear Gradients to elevate the design quality of your web applications, ensuring they are both visually appealing and functional across different devices and browsers.

How to use Linear Gradient in CSS?

mansigeekso9ii

Improve

Article Tags :

CSS Linear Gradient

Examples

Example 1: Basic Linear Gradient

Example 2: Linear Gradient at 45 Degrees

Example 3: Linear Gradient with Multiple Colors

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?