Градиент для текста

Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе WebKit-движка. Тем не менее, этим приёмом можно свободно пользоваться, а для браузеров, не поддерживающих это свойство, просто задавать цвет текста. Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.

Меняя угол градиента, а также используя повтор градиента, можно создавать интересные эффекты.

Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством
-webkit-text-fill-color: transparent, которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

Пример 1. Градиентный текст

Градиентный текст

<p class="gradient-text">Градиентный текст</p>

@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
.gradient-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  display: table;
  margin: 20px auto;
}

Пример 2. Полосатый текст

Полосатый текст

<p class="striped-text">Полосатый текст</p>

.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183D58;
  display: table;
  margin: 20px auto;    
}

Пример 3. Прозрачный текст

<p class="transparent-text">Прозрачный текст</p>

.transparent-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: #2E2F45;
  display: table;
  margin: 20px auto;
  color: white;
  border-radius: 5px;
  mix-blend-mode: multiply;
  padding: 5px 10px;
}

Пример 4. Полосатая тень

Полосатая тень

<p class="striped-shadow">Полосатая тень</p>

.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 5. Тень «горошек»

Тень «горошек»

<p class="shadow-polka-dot">Тень "горошек"</p>

.shadow-polka-dot {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -5px -5px 0px #EF7657;
  background: radial-gradient(#9DA8A9 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 6. Градиентные границы

Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image.
За толщину рамки отвечает свойство border: 1px solid;

<div class="gradient-border">Градиентные границы</div>

.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
}

Пример 7. Градиентные границы и градиентный текст

<div class="gradient-all">Градиентные границы и текст</div>

.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}