От слов к делу, разберём код:
.grad_text{font-size:150%;font-weight:bold;font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: -webkit-linear-gradient(36deg, #999, #555, #000);
background: linear-gradient(54deg, #999, #555, #000);
background: -webkit-linear-gradient(54deg, #999, #555, #000);
background: -moz-linear-gradient(54deg, #999, #555, #000);
background-clip: text;
-webkit-background-clip: text;
-o-background-clip: text;
-moz-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-o-text-fill-color: transparent;
-moz-text-fill-color: transparent;}
Результат:
СМОТРИМ, ЧТО ПОЛУЧИЛОСЬ
В данной записи нас интересует вторая строка и всё то, что идёт после неё, поскольку первая отвечает за размер шрифта, жирность и какой шрифт используется. Градиент CSS же начинается со второй строки, где мы задаём background.
В моём случае иду от светло-серого (#999) к чёрному (#000).
Добавим переменных:
.grad_text2{font-size:150%;font-weight:bold;font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: -webkit-linear-gradient(36deg, #999, #555, #f00, #555, #999, #000);
background: linear-gradient(54deg, #999, #555, #f00, #555, #999, #000);
background: -webkit-linear-gradient(54deg, #999, #555, #f00, #555, #999, #000);
background: -moz-linear-gradient(54deg, #999, #555, #f00, #555, #999, #000);
background-clip: text;
-webkit-background-clip: text;
-o-background-clip: text;
-moz-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-o-text-fill-color: transparent;
-moz-text-fill-color: transparent;}
Результат:
СМОТРИМ, ЧТО ПОЛУЧИЛОСЬ
Я подумал, раз уж речь зашла о градиентах, надо добавить яркости.
