You have possibly noticed text headings on websites that have a nice gradient background. Generally, it is used as a feature to give emphasis to certain words and how it breaks up what would otherwise be a boring block of text. If you have and are looking at how it is done then you are in the right place. Read on to find out how it is done.

How to add a gradient to text background with CSS

To add a gradient, or any background for that matter requires only 3 properties. The three properties are color, background, and background-clip.

As you have possibly guessed the background-clip property is what does the magic so let's take a closer look. What background-clip does is it clips the background to the elements border-box, padding-box, content-box or text. In our case, we will want to clip it to the text. Now that we know we will be using the CSS background-clip property let's look at how it works by adding a gradient background to a heading.

First, we are going to need is a background, you can choose any background you like, make sure it has an interesting pattern and it's not just a plain colour otherwise you won't see any difference.

h1 {
  background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 80%);
}

How to add a gradient background to text.

Okay nice, we have our default black text with a nice background. Next, we will use the background-clip: text; property value pair to achieve the clipping away of the background. You will now have black text again as shown below.

h1 {
  background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 80%);
  background-clip: text;
}

How to add a gradient background to text.

The final property is color and since we want to see the background we need to remove the colour. To do this we set the colour to transparent.

h1 {
  background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 80%);
  background-clip: text;
  color: transparent;
}

That's it, now you can see through our text and see the background! Below is what we have created using an h1 element with the code.

How to add a gradient background to text.

Below is our modified code to support every browser, even though on IE you will get text in the colour that is set. For a full explanation check under the CSS snippet.

h1 {
  color: #1c5ffe;
  background: linear-gradient(90deg, rgba(34,193,195,1) 100px, rgba(253,187,45,1) 500px);
  background-clip: text; /* Firefox only */
  -webkit-background-clip: text; /* needed for chrome/Safari/opera */
  -webkit-text-fill-color: transparent; /*full support except IE, not on standard track */
}

You will notice that I have used the prefixed -webkit-background-clip property, this is to support all browsers as only Firefox currently supports the non-prefixed property.
In the above example, you can also see I have added a fourth property: value and that is the -webkit-text-fill-color: transparent. I have also set the colour property to a fallback colour. This works across all browsers even though it is non-standard and not on track to be included. The reason I have used it is to provide a fallback for good ole Internet Explorer which doesn't support background-clip, so setting the colour to transparent would mean on IE you will see nothing. You may feel no need for this as IE accounts for less than 1% these days.

Well, that's it you can now add gradient backgrounds to your text. If you want to explore adding beautiful colour backgrounds to your text I have written a second part to this call Adding Gradients to Headings: exploring it more deeply. If you have enjoyed this article and want more tips, be sure to join the newsletter for tech and design lovers where I'll be sharing nearly 20 years of knowledge in web design and development, and do the odd giveaway. Don't miss out!