0

CSS 

    h1 {
      font-size: 72px;
      background: -webkit-linear-gradient(#eee, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

HTML

<h1>Hello World</h1>

I see the 'Hello World' text with the gradient in chrome browser. Even though I add other prefixers such as -moz,-mo I don't see it in firefox or opera or IE. What could be the issue?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Techie
  • 44,706
  • 42
  • 157
  • 243

4 Answers4

5

Try this 

    background: $gradient;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;

Working on all browsers for me :)

Sead Silajdzic
  • 51
  • 1
  • 2
0

You need to add the same for -moz and -o(simone comment)

here you can find an example for linear-gradients.
http://www.the-art-of-web.com/css/linear-gradients/#.UNQ9Ztd2EuM

EDIT
unfortunatly the previous poster is right
-moz-background-clip:text does not work in Firefox

Community
  • 1
  • 1
Gert Kommer
  • 1,163
  • 2
  • 22
  • 49
0

Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.

syed mohsin
  • 2,948
  • 2
  • 23
  • 47
0

check this. It is an awesome site for the gradient. You can make any gradient for any browser at a same time and it also supports old version of ie.

  • these are not text gradients – Techie Dec 21 '12 at 11:28
  • But the gradient for text is only supported by Webkit - based browser. Sorry –  Dec 21 '12 at 11:33
  • to make your text fill with gradient u must edit with softwares like photoshop.Because other browser don't support text gradient. –  Dec 21 '12 at 11:35
  • 1
    http://vectips.com/tutorials/quick-tutorial-adding-gradients-to-text/ this will be helpful for you –  Dec 21 '12 at 11:36