Cross browser CSS 3 text gradient [duplicate]

Question

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 gradient. I was wondering whether there was a way to achieve the same/similar effect that would work across all 3 browsers?

      background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

EDIT: The problem with the other solution that's been posted is that it only works on a white background, as someone said in the comments, which is no good for me as I'm using a grey background.

Answer 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.

Answer 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