Приветствую, коллеги. В этой статье расскажу как сделать текст градиентом в 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. Как добавить иконку во вкладку сайта?
