CSS Tip: Gradient Text in WebKit

Gradient text can often be useful in a design, especially for headers.  Since -webkit-gradient works as an image, however, it’s hard to employ for text.  A quick Google will lead you to this Nice Web Type article about pure CSS gradients, but it uses an extra nested element and -webkit-mask-image.  You also have to specify your text once in the markup and once in CSS—in my mind, a major no-no.

So, how do we combat these requirements?  Fortunately, WebKit offers -webkit-background-clip: text, which does just what we need!  It clips the background to only fill the text of the current element; coupled with some transparent text and a -webkit-gradient background, you have gradient text in WebKit, without the need for extra layers and specifying the text in two places.  Try this on for size:

h1.gradient {
    font-size: 70px;
    background-image: -webkit-gradient(linear,
    left top, left bottom,
        from(white),
        to(black)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}