CSS Gradient Text

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!

View Demo

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!

View Demo

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!