Как сделать градиентный заголовок?
В 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>
Автор: Влад Мержевич
Источник: webref.ru