You have possibly noticed text headings on websites that have beautiful gradient backgrounds.

Generally, gradient backgrounds are added to text to give emphasis to certain words, and it also breaks up what might 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 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 background, background-clip, and color.

As you have possibly guessed the background-clip property is what does the magic so let's have a closer look. 

What is background-clip?

background-clip can clip 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.

The 3 Steps

Adding a background to our text element

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.

Here I add a linear-gradient.

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 our summery background. 

Clip Our Element to the Text

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.

Make your text Transparent

The final property is colour, 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.

For Legacy’s Sake

When re-writing this article in May 2026, I could have deleted the below section as background-clip: text has been supported in all major browser since around December 2023 and who even remembers IE. However, for now I have left it as there are a few obscure browsers that still only support the -webkit- prefixed property. You can check Can I use background-clip: text for more information.

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 pre 2023/24*/
  -webkit-background-clip: text; /* needed for chrome/Safari/opera pre 2023/24 */
  -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.

Use -webkit-text-fill-color to support IE

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 color property to a fallback colour. This works across all browsers even though it is non-standard and not on track to be included; (Unsure what that means, not on track to be included, the main thing is it is baseline widely available at 96%).

The reason I used it is to provide a fallback for good ole Internet Explorer, which doesn't support background-clip, so setting the color to transparent would mean on IE you will see nothing. You may feel no need for this as IE accounts for less than 0.3% of users these days. 

Summary

In this article we have looked at how easy it is to add background gradients (or images) to your text using only three properties, background, background-clip, and color.

We also looked at some older legacy code that is still needed to support a few little used browsers.

That's it, you can now add gradient backgrounds to your text. 

If you want to explore adding beautiful colour backgrounds to your text headings, I have written a second part to this call Adding Gradients to Headings: exploring it more deeply. In the article, I discuss a few things to think about with using long heading text and wrapping text.

If you have enjoyed this article and want more tips, be sure to join the newsletter for tech and design lovers where I share nearly 20 years of knowledge and ongoing exploration in web design and development.