Генератор текста с градиентом (CSS)

Генератор текста с градиентом (CSS): для чего нужен

Заголовок с буквами в градиенте привлекает внимание на главной странице и в лендингах и делается только на CSS: градиент становится фоном текста, а background-clip: text вырезает его по форме букв.

Генератор собирает код с префиксом -webkit-, запасным цветом для браузеров без поддержки, настройкой для режима высокой контрастности Windows и, если хотите, анимацией градиента, которая отключается у тех, кто предпочитает меньше движения. Предпросмотр показывает заголовок на светлом и тёмном фоне.

Как пользоваться

1. Напишите текст, выберите шрифт и размер.
2. Выберите цвета и угол.
3. Скопируйте CSS и примените класс к заголовку.

Когда использовать

• Заголовок главной страницы.
• Выделение цены или призыва.
• Текстовый логотип.

Частые вопросы

Как делается градиентный текст?

Градиент — это фон элемента, а свойство background-clip: text вырезает этот фон по форме букв; цвет текста делается прозрачным, чтобы фон был виден. Работает с любым шрифтом, текст остаётся выделяемым и читаемым программами чтения с экрана.

Нужен ли префикс -webkit-?

Код включает -webkit-background-clip вместе с версией без префикса, потому что чуть более старые браузеры понимают только префиксную запись. Запасной цвет отображается там, где ничего из этого не работает.

Можно ли применять к абзацам?

Можно, но лучше оставить для заголовков и коротких акцентов. В сплошном тексте градиент утомляет, а самые светлые участки могут терять контраст с фоном.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты