linear-gradient() Function with Example in CSS

CSS | linear-gradient() function: Here, we are going to learn about the linear-gradient() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 18, 2020

Introduction:

So far, we have learned so many functions but learning never gets enough, therefore as a good developer, we must learn as many functions as we can and know their behavior with the help of practical implementations. But why do we need functions? How do they help us? Well, the answers to those questions will amaze you. There are numerous benefits of using functions while developing a website or a web page. Some of those benefits will be discussed here, so buckle up and grab your notes to explore the usage of functions.

Some very good web developers use functions daily while developing a website or a web page. Functions help in reducing your line of codes, for example, if you take rgba() function, this function helps you in specifying the colors of the elements. So you don't need to specify the colors of each element individually. Now, that your line of codes will be reduced this, in turn, will help in space optimization of the code. Therefore, if you wish to be a good professional developer, try to learn as many functions as you can. Now, that we have discussed some of the crucial benefits of the functions, let us move forward and talk about one such function known as linear-gradient() function in CSS.

Definition:

You might be aware of a linear function() as it is widely used for developing a website or web page. Well, if you are not familiar with this function, then don't worry as this article will tell you all you need to know about this function. Let's start with a formal definition:

Linear gradient function has a very simple behavior, it helps in creating an image that comprises the progressive transition of two or more colors, therefore, as result, we get a gradient which is a newly formed image. Not that tough right? Well, let us have a look at the syntax for a better understanding,

Syntax:

    element{
        background: linear-gradient(color1,color2);
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            height: 150px;
            font-size: 40px;
            text-align: center;
            background-image: linear-gradient(pink, red);
            font-weight: bold;
            color: blue;
        }
    </style>
</head>

<body>
    <div>This is linear-gradient function.</div>
</body>

</html>

Output

In the above example, two colors are used inside the linear-gradient() function.

Conclusion:

Therefore, in a nutshell, it can be said that learning about functions is a very good practice. Besides, it marks the trait of a good developer who knows web development coding.

That was all about linear-gradient() function in CSS. So, go ahead and start implementing this function right away. It is a very interesting function that would help in styling your website or web page profoundly.

CSS Functions »

CSS | rgba() Function

CSS | radial-gradient() Function

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples