How to add a Text Gradient Color with CSS

Learn how to add a linear gradient color to your text elements with CSS, and how to avoid a common gradient mistake.

To add a gradient text color to your HTML text elements, you’ll need the following CSS properties:

  • background
  • -webkit-background-clip
  • -webkit-text-fill-color

Why are we using the background property for coloring text? The approach does seem a bit hacky, but I promise that it works!

Let’s create a quick example where we apply a linear gradient from left to right on a text element, using the following two colors, orange and red:


An <h2> heading element with a class attribute called text-gradient:

<h2 class="text-gradient">Gradient text color!</h2>


Add color gradient styles to the .text-gradient class:

.text-gradient {
  /* Set the background color */
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
  /* Mask the color to the text, and remove the rest  */
  -webkit-background-clip: text;
  /* Make the text fill color value transparent so the masked background color comes through */
  -webkit-text-fill-color: transparent;


Gradient text color!


But hold on a second!

Do you notice a problem with how the two colors are applied to the text element? The colors are applied unevenly.

The linear-gradient CSS function takes two color values:

  • #ff8a00 (the orange)
  • #DD4C4F (the red)

And it’s supposed to spread from 0 to 100% evenly, as specified in the CSS:

(to right, #ff8a00 0%, #DD4C4F 100%)

So we want this on the text element:

Notice how the two colors are evenly applied

But our text example almost entirely orange:

Gradient text color!

Tip: if you toggle the color theme on this website to dark mode (click on the Moon icon) it’s easier to see.

It happens because the <h2> heading element is a block-level element, by default. This means that their background spans the entire width of their parent container.

This makes the colors from the gradient class (.text-gradient) that we added to the <h2> element stretch beyond the width of your text because it’s targeting the background property.

I’ll add a border to the text example to make my point clear:

Gradient text color!

Do you see that?

Text gradients should be set on only the text, not its background (but we need to use the background property to make this work).

To fix this, you need to override the <h2> element’s default display:block settings by adding inline-block instead:

.text-gradient {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;

The result:

Gradient text color!

Sweet! Do you see the difference? Now the red part of the two-color gradient is popping just as much as the orange because they’re applied 50-50.

Browser compatibility

The gradient color trick is only supported in WebKit browsers. For other browsers use the regular CSS color property as a fallback option and use a color similar to the gradient.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on