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.

stackoverflow.com/questions/8384751/css-text-gradient Apparently it's a webkit thing — Evan Parsons
– Evan Parsons, Commented Aug 23, 2013 at 12:38
IE has a large user base. You should worry about it. Especially as it's perfectly capable of doing CSS gradients (certainly IE10 and later have complete support for the standards, and even older versions can do gradients with just a little bit of effort). — Spudley
– Spudley, Commented Aug 23, 2013 at 12:42
@Spudley it only has a large user-base because people keep supporting it :) — iConnor
– iConnor, Commented Aug 23, 2013 at 12:55

thirtydot · Accepted Answer · 2013-08-23 13:20:04Z

3

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.

answered Aug 23, 2013 at 13:20

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harry12345 Over a year ago

SVG was the answer in the end

psd2htmldepot · Accepted Answer · 2013-08-23 12:44:22Z

1

-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

answered Aug 23, 2013 at 12:44

psd2htmldepot

1922 bronze badges

1 Comment

jave.web Over a year ago

This changed for Firefox 49+, it is now fully supported by FF and Edge, other browsers still needs prefix though caniuse.com/#feat=mdn-css_properties_background-clip_text

Collectives™ on Stack Overflow

Cross browser CSS 3 text gradient [duplicate]

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related