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

Главная / Верстка / Как сделать текст градиентом

Мне надо было на сайте сделать градиентным только заголовок 1 уровня h1.

К h1 применила дополнительно следующие стили:

h1 {
  background-color: #fff;
  background: linear-gradient(180deg, #fff 0%, #939fb0 100%);
  background-size: cover;
  background-clip: text;
  color: transparent;
}

Здесь background-color нужен чисто для подстраховки, на случай, если градиент не сработает.

К свойству background применен сам градиент.

Свойство CSS background-clip: text; указывает, что цвет фона или фоновое изображение будут выводиться внутри текста.

Также добавлю, что препроцессор SASS у меня добавил следующие свойства (префиксы):

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#939fb0));
-webkit-background-clip: text;

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *