Текст с градиентом средствами CSS

h1 {
background: -webkit-gradient(linear, left bottom,left top,color-stop(0.2, #336),color-stop(1, #FFF));, black;
-webkit-background-clip: text;
color: transparent;
}

<h1>webonrails.ru</h1>

не знаю как там с кроссбраузерностью у этого примера. Тестил на Хороших браузерах. Также можно тупо png картинку фоном пустить.

IE и Mozilla на данный момент не поддерживают свойство background-clip: text. Так же IE не поддерживает градиент.

Для браузеров на движке webkit проще всего сделать так:

.webkit-gradient {
background: -webkit-linear-gradient(top, #FFFFFF 0px ,#D90000 100%);
-webkit-background-clip: text;
color: transparent;
}

Как только Mozilla начнет поддерживать background-clip: text кроссбраузерный вариант будет такой:

.cross-gradient {
background: -moz-linear-gradient(top , #FFFFFF 0px, #D90000 100%);
background: -webkit-linear-gradient(top, #FFFFFF 0px ,#D90000 100%);
-moz-background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

Но в IE по прежнему ничего работать не будет.