56px
Градиентный текст
Что такое градиентный текст?
Градиентный текст применяет плавный многоцветный градиент к вашему тексту и выводит готовый к использованию CSS. Просматривайте эффект в реальном времени и копируйте CSS-класс прямо в вашу таблицу стилей.
Как использовать градиентный текст
- Введите текст и выберите цвета градиента.
- Выберите направление и отрегулируйте размер шрифта.
- Скопируйте CSS и вставьте его в таблицу стилей.
Подробнее▾
Как работает градиентный текст в CSS
Для текста с CSS-градиентом используется background: linear-gradient(...) в сочетании с -webkit-background-clip: text и -webkit-text-fill-color: transparent. Это обрезает градиент по форме текста, и буквы выглядят залитыми цветами градиента.
Часто задаваемые вопросы
Работает ли это во всех браузерах?
Да. Префикс -webkit включён для широкой совместимости.