Делаем градиент к тексту, используя CSS

Добавляем пустой тег <span> в заголовок:

<h1><span></span>CSS Gradient Text</h1>

В файл стилей .css добавляем:

h1 {
    font: bold 330%/100% "Lucida Grande";
    color: #464646;
/* тут соль */
    position: relative;
}
h1 span {
/* указываем изображение с градиентом */
    background: url(gradient.png) repeat-x;
/*позиционируем абсолютно */
    position: absolute;
/*отображаем блоком на всю ширину заголовка */
    display: block;
    width: 100%;
    height: 31px;
}

надо еще повоевать с IE6, для этого в HTML код вставляем следующее:

<!--[if lt IE 7]>
<style>
h1 span {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->

Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C http://www.w3.org/Style/Examples/007/text-shadow.html

Автор русского перевода: Евгений Скрипец (все переводы автора: en, ru, uk )