I found the best way to do this is to use SVG gradients, it's easy to do and doesn't require any images, below is some code that creates a simple text gradient using SVG.
You can change the x and y values to create a horizontal/vertical or diagonal gradient, you can also apply styles to it using a CSS stylesheet, all it takes is an extra line of code between the defs tags.
This method works in the latest versions of Chrome, IE, Firefox and Safari. You can also apply radial gradients, blurs and filters, for more information go to W3 Schools.
