Градиентный текст становится все более популярным элементом в веб-разработке. Раньше для реализации градиентного текста использовали статические изображения, однако теперь это можно легко сделать с помощью CSS.

В примере ниже создадим несколько текстовых элементов на темном фоне и средствами CSS добавим им градиентную заливку:

Как работает градиентный текст

Градиентный текст создается с помощью нестандартного набора нескольких свойств CSS, некоторые из которые имеют вендорный префикс -webkit-. А поскольку большинство браузеров в основном основаны на Хроме, градиентный текст имеет довольно широкую поддержку во всех современных веб-браузерах. Браузеры, не поддерживающие данные правила, их просто проигнорируют.

Набор свойств для градиентного текста:

.text {       
  background-image: linear-gradient(to right, #28d8ff, #032eff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
}

background-image - задаем градиент, который хотим применить к тексту

-webkit-text-fill-color - делаем цвет текста прозрачным

-webkit-background-clip - обрезает фоновое изображение по контуру текста. Таким образом фон будет только в том месте, где находится текст

-webkit-box-decoration-break - свойство, позволяющее градиенту распространяться на несколько строк