How to add Linear gradient to text in 3 steps

How to add Linear gradient to text in 3 steps

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.


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>
HTML heading and paragraph tag
HTML heading and paragraph tag

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


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

    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.




Linear Gradient using HTML / CSS


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.

Leave a Reply

Your email address will not be published. Required fields are marked *