Как работает градиентный текст в CSS?

В CSS нет свойства «градиент текста». Обычно градиент задают как фон элемента, обрезают его по форме букв с помощью background-clip: text, а заливку текста делают прозрачной, чтобы сквозь неё был виден градиент.

Описание инструмента

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

Сгенерированное правило выглядит так:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

В итоговый код также входят настройки шрифта и правила переноса.

Возможности

  • Линейный градиент из двух цветов с углом от 0 до 360 градусов
  • Настройки гарнитуры, начертания и размера шрифта
  • Предварительный просмотр в реальном времени, который можно экспортировать как изображение, и готовый CSS для вставки