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

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Introducing MooTools LazyLoad

    Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that...

  • By
    MooTools Gone Wild: Element Flashing

    If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...

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!