Text gradient on firefox

Question

I created a gradient for text that works great on chrome and I have been trying to have the text display the same way in firefox using -moz- without success.

Is there a way to acomplish this same effect for firefox?

Here is the css:

body h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 600;
  background: -webkit-linear-gradient(top, #48e0ff, #ffffff);
  background: linear-gradient(top, #48e0ff, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

score 0 · Answer 1 · answered Dec 26 '13 at 20:42

Unfortunately, while background-clip is a valid CSS3 property, the text value is non-standard. A common workaround for non-webkit browsers is to use SVGs instead.

I found a jQuery plugin for handling this cross browser. It does seems a little heavy though.

Demo Github

Text gradient on firefox

1 Answers1