CSS Gradient Text

By  on  

Web developers know the fight we’ve all had to improve fonts on the web. Whether it be load time, odd strategies for using custom fonts (Cufon, anyone?), or just finding the right font itself, beautifying text on the web has never come easy.

That got me thinking about fonts and CSS gradients, since gradients also had a difficult introduction to the web. Let’s look at how we can use gradient fonts with only CSS!

To display a gradient for a given font, instead of a solid color, you’ll need to use some old-school -webkit--prefixed properties:

.gradient-text {
  /* standard gradient background */
  background: linear-gradient(red, blue);

  /* clip hackery */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This mixture of -webkit--specific CSS and general gradient background was discovered ten years ago but remains the best way to achieve a pure CSS background, even with custom fonts. Note that despite the -webkit prefix, Firefox still correctly renders the gradient font. Also note that removing the prefix breaks proper rendering — weird!

With as complicated as fonts can get, it’s awesome that we have a fairly simple CSS hack to accomplish gradient text. It’s a shame that avoiding the -webkit prefix breaks functionality, but welcome to the world of CSS!

Recent Features

Incredible Demos

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

  • By
    MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

Discussion

  1. Ivan

    Won’t work in <IE11 just a small caveat! Still a very neat little trick!

  2. On Firefox 78, no prefix CSS edition works.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!