Achieving a Text Gradient Effect with CSS

Do you want to create a title text with a gradient without using Photoshop? Here, with a simple CSS trick, we'll show you how to achieve this effect using only CSS and PNG images. This method has been tested and works with most mainstream browsers. Of course, IE6 requires a hack that supports transparent PNGs (fortunately, Microsoft is making great efforts to automatically upgrade users' IE6 to IE7; read more: Warning: An IE7 Auto-Update Is Coming Soon).

Advantages

　　This is a pure CSS technique, no JavaScript or Flash is used, and it works on most browsers (IE6 requires a hack for transparent PNG support).

　　This is perfect for title design; you don't need to use Photoshop, which will save a lot of your bandwidth and time.

　　You can apply this effect to any web font, and the font size is also adjustable.

How does it work?

　　This trick is very simple. We just overlay a 1px wide transparent PNG on the text.