Как сделать градиентный текст на css и анимировать его

#верстка /

Блог
Как сделать градиентный текст на css и анимировать его

Нам понадобится сделать простую разметку:

<body>
  <p class="text">Градиентный текст</p>
</body>

Весь остальной код будет в CSS. Для начала оформим текст необязательными свойствами: установим шрифт без засечек, т.к. я выбрал тег <p> для обертки текста нам нужно будет его преобразовать в строчно-блочный элемент, чтобы правильно отображался градиент, и зададим размер текста в 80 пикселей:

.text {
  font-family: Inter, sans-serif;
  text-transform: uppercase;
  display: inline-block;
  font-size: 80px;
}

Теперь зададим сам градиент нашему тексту, точнее фон

.text {
  …
  background: -webkit-gradient(linear, right top, left top, from(#f1d335), color-stop(50%, #db01ff), to(#f1d335));
  background: -o-linear-gradient(right, #f1d335 0%, #db01ff 50%, #f1d335 100%);
  background: linear-gradient(to left, #f1d335 0%, #db01ff 50%, #f1d335 100%);
}

Установим два важных свойства, которые применят и обрежут градиент на нашем тексте:

.text {
  …
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

Расширим фон текста на 200% чтобы анимация работала стабильно

.text {
  …
  background-size: 200%;
}

Зададим свойства анимации: назовём нашу анимацию animationGradient, время длительности 5 секунд, ускорение линейное, и количество итераций бесконечное:

.text {
  …
  animation: animationGradient 5s linear infinite;
  -webkit-animation: animationGradient 5s linear infinite;
}

Теперь сама анимация, которая будет основана на движении фона по оси X:

@-webkit-keyframes animationGradient {
  0% {
    background-position: -100% 0%;
  }
  100% {
    background-position:  100% 0%;
  }
}

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

В итоге у нас должна получиться плавная анимация градиентного текста:

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