CSS Text Gradient Effect

All you need is to add an empty <span> tag that will hold the PNG image with the gradient and overlay the text. This css trick is supported by al modern browsers like Firefox, Safari, Opera and IE7 or higher.

Putting it together

HTML

<h1><span></span>Some text you want</h1>

CSS

The key to secure this trick is applying the css property position:relative; to the <H1> tag and position:absolute; to the <span>. The span will need to have the same width and height as the <H1>:

h1 {
    color#222;
    position:relative;
}
h1 span {
    position:absolute;
    width:100%;
    height:40px;
    display:block;
    background: url(text-gradient.png) repeat-x;

}

And there you have it. Check out the demo of CSS Text Gradient Effect to see the code in action. This technique does not allow the user to select of click on the text since the PNG image will overlay it they will be clicking on the image.