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

Как сделать текст градиентом — простой 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 нужно с осторожностью. Это нестандартное свойство, поведение которого может измениться в будущем.

Сделать текст градиентом с помощью text-fill-color

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

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