Градиент у текста | CSS

• для браузеров Webkit
• не для IE
• для остальных
  1. Заполняющийся текст
  2. Пробегающий по буквам блик
• Тень текста
• Эффект постепенно появляющихся букв
• Разный вид букв одного слова

Градиентный текст для браузеров Webkit

<style>
.raz {
  background: linear-gradient(green, red);  /* подробнее про градиенты */ 
  -webkit-background-clip: text;  /* подробнее про background-clip */ 
  color: transparent;
}
</style>

Образец

<div class="raz">Образец</div>

Переход от одного цвета в другой происходит для всего блока, но отображается только на месте букв.

Первая строка
Вторая строка
Третья строка

<div class="raz">
  Первая строка<br>
  Вторая строка<br>
  Третья строка
</div>

Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports. Потому что даже если его поддержат остальные браузеры, в старых версиях человек не различит ни буквы.

Картинка прозрачна в тех местах, где нет текста

Только если текст стоит на чёрном (darken) или белом (lighten) фоне (автор).

Разноцветный градиент

Переливающееся слово

<style>
.dva { 
  background: linear-gradient(green, red);
}
.dva h1 { 
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>

<div class="dva">
  <h1>Переливающееся слово<h1>
</div>

Картинка как фон у текста

Изображение внутри буквы

<style>
.dva { 
  background: url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) 100% 50%;
  background-size: cover;
}
.dva h1 { 
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>

<div class="dva">
  <h1>Изображение внутри буквы<h1>
</div>

Внимание: примечателен пример из комментария 11 после статьи.

Градиент у текста для остальных браузеров

Поверх блока можно наложить ещё один полупрозрачный слой того же цвета, что и фон, только не стоит применять transparent.

Образец

<style>
.dva {
  position: relative;
}
.dva:after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.0));
}
</style>

<div class="dva">Образец</div>

Заполняющийся текст

Навести

<style>
.dva {
  position: relative;
}
.dva:after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%;
  background-size: 100% 100%;
}
.dva:hover:after {
  transition: 12s linear;
  background-size: 0 100%;
}
</style>

<div class="dva">Образец</div>

Пробегающий по буквам блик

На мой вкус, лучше анимацией сделать как у Сбербанка.

Навести

<style>
.dva {
  position: relative;
}
.dva:after {
  content: "";
  position: absolute; top: 0; left: -2em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%;
  background-size: 2em 100%;
  transform: skewX(-50deg);
}
.dva:hover:after {
  transition: 2s linear;
  background-position: 100% 0%;
}
</style>

<div class="dva">Образец</div>