Как сделать текст градиентом — простой CSS-трюк

Прежде чем разбираться, как сделать текст градиентом, посмотрим на результат. Вот что мы получим в итоге:

See the Pen CSS Gradient text effect by Pochemuta (@pochemuta) on CodePen.

Для удобства настроим внешний вид и поведение родительского элемента.

			body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: #000;
}
		

Затем стилизуем сам заголовок:

			h1 {
  font-family: Roboto, Arial, sans-serif;
  font-size: 10vmax;
  background-color: #2AA5A0;
  background-image: linear-gradient(90deg, #E3535D, #2AA5A0);
}
		

На всякий случай прописываем запасной цвет — background-color: #2AA5A0. Даже если градиент не сработает, текст не потеряется на фоне.

Вот так выглядит промежуточный результат:

Градиент есть, градиентного текста пока нет

Теперь добавляем немного магии, чтобы получить градиентный текст:

			h1 {
  font-family: Roboto, Arial, sans-serif;
  font-size: 10vmax;
  background-color: #2AA5A0;
  background-image: linear-gradient(90deg, #E3535D, #2AA5A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
		

Осталось понять, что происходит:

• свойство -webkit-background-clip: text оставляет градиент только под текстом;
• свойство -webkit-text-fill-color: transparent делает цвет текста прозрачным.

Фактически текст не становится градиентным. Однако через него теперь виден градиент, то есть задачу мы решили.

Вот ещё пример того, как можно использовать те же свойства. Раскомментируйте text-shadow, поменяйте radial-gradient на linear-gradient — эффекты будут заметно отличаться.

See the Pen CSS Gradient text effect-shadow by Pochemuta (@pochemuta) on CodePen.

Поддерживаются все современные браузеры. Исключение — Internet Explorer. Но пользоваться -webkit-text-fill-color нужно с осторожностью. Это нестандартное свойство, поведение которого может измениться в будущем.

Поддержка выглядит неплохо, но есть нюансы

Больше интересных материалов:

• CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
• Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
• Как стать фронтенд-разработчиком в 2021 году: дорожная карта