Cross Browser Css 3 Text Gradient

On my website, I'm using a text gradient for the heading, but it only works on Chrome and probably Safari (although I haven't tested it), below is the code I'm using for the gradie

Solution 1:

If you want this to work in non-WebKit browsers, you need to use a solution other than CSS.

There are some JavaScript solutions out there, or you can use SVG.

Here's a good blog post on how to do it: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Using JavaScript has the downside of... using JavaScript, but at the end of the day this is only a decorative visual effect.

Solution 2:

-moz-background-clip:text does not work on firefox, and you won’t be able to achieve clipping effect in Firefox.

You can use cufon for the text gradients, and thay will work on IE, Chrome and Firefox