Градиентный текст заливает буквы плавной смесью цветов через background-clip: text — эффект за бесчисленными hero-заголовками и лендингами. С анимацией градиент медленно течёт сквозь буквы.
Введите текст, выберите два цвета и угол, включите анимацию блеска и скопируйте CSS. В выводе уже есть вендорные префиксы — работает во всех браузерах.
Frequently Asked Questions
Q: Почему градиент не отображается в браузере?
Почему градиент не отображается в браузере? Приём требует -webkit-background-clip: text и -webkit-text-fill-color: transparent. Оба включены в вывод — проверьте, не удалил ли их CSS-минификатор.
Q: Работает ли градиентный текст во всех браузерах?
Работает ли градиентный текст во всех браузерах? Да — Chrome, Edge, Safari и Firefox поддерживают background-clip: text. Очень старые браузеры покажут сплошной цвет, если сначала задать fallback.
Q: Можно ли использовать на кнопках?
Можно ли использовать на кнопках? Можно, но кнопки несут действие: лучше однотонная высококонтрастная надпись, а градиентный текст — для заголовков и декора.
Q: Как добавить больше двух цветов?
Как добавить больше двух цветов? Отредактируйте linear-gradient в выводе и добавьте цветовые остановки, например linear-gradient(90deg, red, yellow, blue).
Q: Хорошо ли это для SEO и доступности?
Хорошо ли это для SEO и доступности? Текст остаётся настоящим HTML, SEO не страдает. Держите высокий контраст и избегайте градиента в основном тексте.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.