techstacker.com Open in urlscan Pro
52.58.254.253  Public Scan

Form analysis
0 forms found in the DOM

Text Content

techstacker
Topics

techstacker
HTMLCSSJavaScriptMacTypographySEOAll TopicsYouTube


JavaScript is disabled in your browser. To get the best user experience on our
website you should enable it :-)


HOW TO ADD A TEXT GRADIENT COLOR WITH CSS

September 24th, 2020
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:





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:


GRADIENT TEXT COLOR!

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:


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

Twitter
Reddit
Hacker News
Subscribe to Newsletter
YouTubeAboutSponsordavid@techstacker.com
© 2022 TechStacker