This is a very useful and cool CSS design approach, saves time and effort and still SEO friendly. Hit the link for more.

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/