В CSS для создания градиентов применяется стилевое свойство background, а также функция linear-gradient() для линейных градиентов и radial-gradient() для радиальных градиентов.
Рис. 1. Заголовок с градиентом
Добавление градиента напрямую к заголовку <h1> или <h2> не даёт желаемого нам результата, поскольку градиент применяется ко всему блоку, а не к буквам. Чтобы получить заголовок, показанный на рис. 1, следует добавить свойство background-clip со значением text и установить прозрачный цвет текста.
h1 {
background-clip: text;
color: transparent;
}
Значение text у свойства background-clip не является официальным и некоторые старые версии браузеров поддерживают его с префиксом -webkit-. Поэтому для универсальности в примере 1 представлено два варианта — с префиксом для старых браузеров (-webkit-background-clip) и без префикса для современных (background-clip).
Пример 1. Использование background-clip
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Градиентный текст</title>
<style>
.gradient {
font-family: Impact, Haettenschweiler, 'Arial Bold', sans-serif;
font-size: 4rem; /* Размер шрифта */
background: linear-gradient(to bottom, #79ff00, #090979); /* Градиент */
-webkit-background-clip: text; /* Для старых браузеров */
background-clip: text; /* Фон внутри текста */
color: transparent; /* Прозрачный цвет */
}
</style>
</head>
<body>
<h1 class="gradient">Градиентный заголовок</h1>
</body>
</html>