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

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

Answer 2

h1 { position: relative; font-size: 70pt; margin-top: 0; }

h1 a {
    text-decoration: none;
    color: #ffcc33; /* or rgb/a */
    position: absolute;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
//css to enter the content on page after render - optional
h1:after {
    content : 'Hello World';
    color: #d6d6d6;
    text-shadow: 0 1px 0 white;
}