Most designers attempting to place gradients inside heading text on the web assume that doing so requires that the text be rendered as bitmap image, neccessitating an increase in file size and download time while lowering accessibility and SEO.

It is possible to create a brushed metal effect with CSS alone: the one drawback is that the gradient is only currently visible in Webkit and Blink browsers.

h1 {
	font-family: Origin, Helvetica Light, sans-serif;
	text-transform: uppercase;
	font-size: 4rem;
	color: rgb(255,242,181);
	background-image: linear-gradient(rgb(255,242,181) 28%, 
		rgb(77,77,77) 40%,
		rgb(255,242,181) 54%);
	text-align: center;
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	letter-spacing: .5rem;
}

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).

Origin font by Nathan Towie:

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/oXevQx