Можно ли установить градиент на цвет текста?

Question

Firefox 3.6 позволяет установить gradient on backgrounds.

Возможно ли установить градиент на цвет текста?

For example:

HTML:

<span>Hello</span> 

CSS:

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

Я хотел бы "заменить" #222 с -moz-linear-gradient(left, white, blue);, например.

Есть ли способ сделать это?

Answer 1

Если только это нужно для небольшого количества текста (как заголовок), вы должны быть в состоянии достичь эффекта в Safari/Chrome с помощью -webkit-background-clip: text и -webkit-gradient. (Firefox не поддерживает это пока.)

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; 
}