Creating a gradient text effect with CSS

Published on: 2021-02-21

I was recently asked by a coworker how we had done a specific gradient effect on a font inside of our product.

For all of my CSS experiments, I use CodePen as a sandbox. If you take a look at my profile you will see that it is a hot mess of experiments (some work, some don't).

Create your text.

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS - Gradient Text - Step 1" src="https://codepen.io/eddysims/embed/wvodzeE?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/eddysims/pen/wvodzeE'>CSS - Gradient Text - Step 1</a> by Eddy Sims (<a href='https://codepen.io/eddysims'>@eddysims</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

All we are doing here is adding some text to a page and using Flexbox to center align it both vertically and horizontally. There is nothing special that happens at this point.

Add a background to your font.

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS - Gradient Text - Step 2" src="https://codepen.io/eddysims/embed/jOVmMyd?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/eddysims/pen/jOVmMyd'>CSS - Gradient Text - Step 2</a> by Eddy Sims (<a href='https://codepen.io/eddysims'>@eddysims</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

This is where the "magic" starts to happen. What it appears is that we have some pinkish-colored text on the screen, but in fact, there is much more going on here.

The first thing we have done here is added a background color to our `h1` tag using the basic `background` attribute. This will give us our text with a block of pink behind it.

Next, we use the `background-clip: text` property. What we are doing here, is telling our background to "clip" to the text. This will remove all of the background that is not being covered by text. At this point, it would appear as though we are back to where we started, with some plain-styled text.

Finally, we will use `color: transparent` to have our text become opaque. This should now show what appears to be our pinkish-colored text, but what you may realize is that we are showing transparent text with a pinkish-colored background. Two very different things.

Create your gradient.

CssGradient.io is a great tool that you can use to create quick, complex CSS background gradients.

I have used this tool to create the background gradient. From there all we need to do is copy and paste that gradient into our pen and voila! 

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS - Gradient Text - Step 3" src="https://codepen.io/eddysims/embed/abBmOpe?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/eddysims/pen/abBmOpe'>CSS - Gradient Text - Step 3</a> by Eddy Sims (<a href='https://codepen.io/eddysims'>@eddysims</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

Some Notes

  1. If you are working in older browsers, `background-clip` 

    . If you are required to use older browsers like IE11, you will want to ensure that you are using the CSS 

     at-rule.

  2. If your project does not use 

     and 

    , you will need to add the `-webkit-background-clip: text` vendor-prefixed version as well.

  3. For some reason, you will need to make sure that the `background-clip: text` comes 

    after

     your background declaration. I have tested this in Chrome, and not sure why this is an issue.

Conclusion

While this may be a very quick, simple version of how to create CSS gradient text, I hope that it can help to understand how to use `background`, `background-clip: text` and `color: transparent` to create all types of fun, cool, and most importantly accessible text styles.