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

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:

HTML

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

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

CSS

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;
}

Result:

Nice!

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:

But our text example almost entirely orange:

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:

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:

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.