Как задать градиент тексту CSS

Для задания градиента тексту в CSS можно использовать свойство background-clip с значением text вместе с свойством background-image и указанием градиентного фона.

Например, следующий код создает текст с градиентным фоном:

.gradient-text {
  background-image: linear-gradient(to right, #e66465, #9198e5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

Обратите внимание, что это свойство не поддерживается во всех браузерах и может не работать в некоторых старых версиях. При этом текст будет скрыт в браузерах, которые не поддерживают background-clip: text. Вы также можете использовать префиксы для каждого браузера, чтобы обеспечить максимальную совместимость.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как задать градиент тексту CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали