Is it possible to set the gradient to text color?

Question

Firefox 3.6 allows you to set the gradient on the background .

Is it also possible to set the gradient to text color?

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" #222with -moz-linear-gradient(left, white, blue);, for example.

Is there any way to do this?

Answer 1

If you only need a small amount of text (such as a title), you can achieve the effect in Safari / Chrome with -webkit-background-clip: textand -webkit-gradient. (Firefox does not support this yet.)

This demo does not 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;
}

>