Накладываем градиент на текст с помощью CSS3

В свое время на одном из моих сайтов было необходимо нанести градиент на некоторые участки текста. Первое, что приходит в голову – это просто наложить градиент на текст в каком-нибудь текстовом редакторе, например, в Photoshop, сохранить как картинку и разместить на сайте.

Минусы: это картинка (то есть лишний вес страницы, отсутствие возможности индексирования контента; если вы допустили ошибку или захотели изменить содержимое текста – необходимо проделать всю работу с графикой вновь).

Есть еще один популярный способ реализации градиента на тексте, где одним из важных параметров является наличие однотонного фона, что в некоторых случаях не подходит.

Поэтому я покажу вам, как с помощью CSS3 и небольшой «магии» добиться лучшего решения этой задачи.

Все, что вам необходимо – это нужному блоку с текстом присвоить следующие стили:

background: linear-gradient(#fff 50%, #000);
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 

Где:

background: linear-gradient(#fff 50%, #000);

это необходимый вам градиент, а «#fff» и «#000» его цвета.

Обратите внимание, что последовательность этих стилей имеет значение. Итоговый вариант будет выглядеть следующим образом:

О том, какие типы градиента и возможности их настройки существуют, вы можете почитать в этой статье.

Реализация корректно работает в браузерах Opera, браузерах на движке Chromium (Google Chrome, Яндекс.Браузер, Амиго и других), FireFox и Microsoft Edge.

Internet Explorer, к сожалению, не радует в этом вопросе, но тут решать вам. Удачных вам разработок.