Is that possible to set gradient on text color ?

Question

Firefox 3.6 allows to set gradient on backgrounds.

Is that possible to set gradient on the text color as well ?

For example:

HTML:

<span>Hello</span>

CSS:

body {
    background: -moz-linear-gradient(left, red, white);
}
span {
    font-size: 13em;
    color: #222;
}

I would like to "replace" #222 with -moz-linear-gradient(left, white, blue);, for example.

Is there any way to do this ?

Answer 1

-webkit-gradient( linear, left bottom, left top, color-stop(0.24, rgb(51,144,118)), color-stop(0.62, rgb(77,173,154)), color-stop(0.81, rgb(108,208,185)) ) -moz-linear-gradient( center bottom, rgb(51,144,118) 24%, rgb(77,173,154) 62%, rgb(108,208,185) 81% )

Answer 2

If you only need this for a small amount of text (like a heading), you should be able to achieve the effect in Safari/Chrome using -webkit-background-clip: text and -webkit-gradient. (Firefox doesn’t support this yet.)

This demo doesn’t use gradients, but it should explain background-clip: text