Как залить текст градиентом с помощью CSS

CSS не позволяет напрямую применить background к цвету текста, для этого используются 2 специальных свойства:

• -webkit-text-fill-color: transparent – Делает сам текст прозрачным, чтобы сквозь него был виден градиент.
• -webkit-background-clip: text – ограничивает область отображения фона только текстом.

.gradient-text {
  font-size: 64px;
  font-weight: bold;
  background: linear-gradient(90deg, red, orange, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Анимация градиента

Хочешь, чтобы градиент “двигался”? Добавь анимацию:

.gradient-text {
  background: linear-gradient(90deg, red, orange, green, blue, indigo, violet);
  background-size: 600% 600%;
  animation: gradientMove 5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}