Как сделать текст градиентом CSS

Приветствую, коллеги. В этой статье расскажу как сделать текст градиентом в css. Это будет полезно для многих новичков, так как очень многие дизайнеры используют градиент текст при создании макетов сайтов. А делать это картинками — точно не то, что вам нужно. Сразу скажу, что данный способ работает с браузерами с поддержкой webkit.

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

<p class='text-gradient'>Пример тестка градиентом</p>
.gradient-text {
  background: linear-gradient(red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Пример текста градиентом

Дальше просто меняем сам градиент, как мы делаем это в любых других ситуациях. Вот полезный сайт, который поможет вам подобрать градиент — cssgradient.io

Спасибо, что прочитали. Если у вас остались вопросы — смело задавайте их в комментариях)
Если хотите узнать больше о Web-разработке — можете прочитать другие мои статьи:

1. Самый простой способ добавить гамбургер иконку
2. Как добавить иконку во вкладку сайта?