Create Brushed Metal Lettering With CSS Gradients

Yesterday one of my 2^nd year web development students presented a site mockup featuring gradients inside heading text. She was under the impression that creating this effect meant that all the text would have to be rendered out as bitmap images before it could be used on a site, which obviously adds to file size and page download time while lowering accessibility and SEO.

That’s not entirely true: you can create a brushed metal effect by creating a gradient in CSS, and applying it inside text: the one drawback is the gardient is only currently visible in Webkit browsers. For this example, I’ll use the Origin font by Nathan Towie:

The result is what you see at the top of this article. This is one of the areas where vendor prefixed CSS really works well: the gradient is only produced for Chrome and Safari, and they are the only browsers to place the brushed metal effect inside the text. Every other browser sees the same text, but in a single color.

I've shown a way of achieving this effect cross-browser previously, but that technique works by embedding the text inside an SVG document, which reduces compatibility with older browsers (read: IE8 and earlier).