In this short article, we are going to see how we can add linear gradient to any text in HTML.

We are going to do this in 3 easy steps.

HTML

First thing we are going to do is to write any text in HTML. It can be in heading tag or in paragraph tag.

 <h1 class="gradientText">Welcome</h1>

You will also need to give it a Class or an ID, so we can use it in .css file.

CSS

The next thing we need to do is to make the following changes in our CSS file.

.gradientText{
    background-image: linear-gradient(90deg, red, blue);
    /* background: -webkit-linear-gradient(180deg, red,blue); */
    -webkit-background-clip: text;
    background-clip: text;
    width: fit-content;
    color: transparent;

}

Linear Gradient explanation:

So first, we gave background to our Welcome heading. This allowed us to have the linear gradient background of red and blue. We also gave it 180deg angle. After that we did -webkit-background-clip and set the value to text. This made sure that the linear gradient is set to our Welcome text. But we couldn’t see it. That’s because it was behind the black color of the text. So, for that, we make our text transparent, so the linear gradient behind can reveal itself.

Result

Inspiration

Conclusion

There you go. Easy to follow steps to make Linear Gradient Text, using only HTML and CSS.

Comment down below, how are you going to use Linear Gradient.