Анимированный градиент в тексте с помощью CSS

Иногда хочется выделить часть текста не просто цветом, а сделать ее динамичной и живой. Один из эффективных способов — использовать анимированный градиент.

Пример можно посмотреть здесь: CodePen — Анимированный градиент текста

🔧 Пример кода

HTML:

<h1>Сладкий <span class="gradient">ТЮЛЕНЬ</span></h1>

CSS:

.gradient {
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #7c3aed, #f472b6);
  background-size: 600% 600%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;
  transition: background-position 1s;
}
.gradient:hover {
  background-position: 100% 50%;
}

🧠 Как это работает:

background-clip: text — делает фон видимым только внутри текста.
background: linear-gradient(...) — Задает фоновый градиент
transition: background-position 1s — Задает плавную анимацию перехода

Получается что мы делаем для класса gradient фоновый градиент, увеличиваем его в несколько раз, делаем фон видимым внутри текста, а цвет текста делаем прозрачным.

При наведении мыши на слово, мы просто двигаем задний фон.

Так и получается анимированный градиент текста.

📱 Мои каналы

YouTube

Автор: Ренат Гришин (Renat Grishin)