12

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.

Harry12345
  • 1,144
  • 6
  • 20
  • 47
  • 6
    http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-pure-css-without-using-background-image – Xareyo Aug 23 '13 at 12:35
  • http://stackoverflow.com/questions/8384751/css-text-gradient Apparently it's a webkit thing – Evan Parsons Aug 23 '13 at 12:38
  • What do you mean "across all 3 browsers"? There are more than three browsers on the market in common use. – Spudley Aug 23 '13 at 12:40
  • Yeh, but I'm only really bothered about IE, Chrome and Firefox as they're the main three – Harry12345 Aug 23 '13 at 12:41
  • 1
    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 Aug 23 '13 at 12:42
  • ah, I misread you. :) But the same applies to Safari too; you absolutely need to support it, otherwise you're ignoring every iPad user. – Spudley Aug 23 '13 at 12:45
  • Good point, since both Chrome and Safari are webkit, then if it works on Chrome it should work on Safari as well, right? – Harry12345 Aug 23 '13 at 12:46
  • 3
    @Spudley it only has a large user-base because people keep supporting it :) – iConnor Aug 23 '13 at 12:55
  • 1
    Why wouldn't it work on gray? – John Dvorak Aug 23 '13 at 12:56
  • It "works" but it just doesn't look good as there is a white stripe behind the heading – Harry12345 Aug 23 '13 at 12:57

2 Answers2

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
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

psd2htmldepot
  • 192
  • 2
  • This changed for Firefox 49+, it is now fully supported by FF and Edge, other browsers still needs prefix though https://caniuse.com/#feat=mdn-css_properties_background-clip_text – jave.web Feb 09 '20 at 00:18