CSS для цвета текста или заголовка градиентом
Сегодня встала задача на сайте клиента сделать цвет заголовка градиентом.
Учитывайте, что Градиент для текста не поддерживается всеми браузерами - работает только в браузерах на основе WebKit-движка.
Но это не мешает нам использовать этот прием. Для остальных браузеров просто зададим обычный цвет.
Работать будет везде, просто на Webkit-браузерах с градиентом, а на остальных - без.
Что пишем:
background: linear-gradient(90deg, #ff8378, #ffb68a);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: #ff8378;
background: linear-gradient(90deg, #ff8378, #ffb68a);
90deg - угол поворота градиента.
Нам нужно, чтобы градиент был слева-направо. Поэтому ставим угол 90 градусов.
Далее задается цвет 1 (который слева), цвет 2 (который справа)
background-clip: border-box; -webkit-background-clip: text
Обрезает любой фон (в том числе градиентный) по границе текста.
-webkit-text-fill-color: transparent;
Делает буквы текста прозрачными - нужно для того, чтобы градиентный фон проглядывал через текст.
color: #ff8378;
Основной цвет шрифта - для не WebKit-браузеров. Там где градиент не поддерживается