Как создать анимированные градиенты в CSS простым способом.

Градиент — это продолжение цветов с начальной и конечной точкой, а линейный градиент постепенно переходит по прямой линии в другой цвет.

Анимация градиентов — последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. С помощью свойства background-clip и анимации CSS очень легко реализовать анимированные текстовые градиенты.

Синтаксис: Как создать анимированные текстовые градиенты
Сначала нам нужно установить шрифт с помощью h1 или любого другого тега по нашему выбору и разместить его в нужном месте. Я разместил свой шрифт в центре с помощью flexbox.

Результат может быть достигнут с помощью

1. linear-gradient()
2. background-clip
3. text-fill-color
4. анимация

1.Свойство Linear-gradient():
Как объяснялось выше, это свойство создает фоновый линейный градиент на текстовом блоке.
В CSS линейный градиент реализуется с помощью:

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

И результат будет таким:

2.свойство background-clip():
Это свойство CSS устанавливает, будет ли фон элемента распространяться под его border-box, padding-box или content-box.

background-clip: text;

После применения этого свойства наш текст будет выглядеть следующим образом:

Фон закрашивается в пределах текста переднего плана (обрезается).
Из-за цвета текста мы не можем видеть наш линейный градиентный цвет, и тогда приходит время использовать наше третье свойство.

Свойство 3.text-fill-color:
Поскольку мы хотим видеть линейный градиент, который обрезан по тексту переднего плана, мы должны сделать цвет текста прозрачным, и результат будет достигнут:

Теперь давайте наложим анимацию, чтобы достичь желаемого результата.
Для этого мы увеличим размер фона градиента, чтобы при создании анимации был хорошо виден эффект.

background-size:300%;

Теперь добавим css-анимацию:

animation: bg-animations 2s infinite alternate;

Здесь bg-animation — это имя ключевого кадра, который мы будем использовать для анимации. Вы можете назвать его как угодно.

Теперь мы создадим анимацию ключевого кадра, как показано ниже:

@keyframes bg-animations{
  0%{
    background-postion:left;
  }
  100%{
    background-position:right;
  }
}

И вуаля, мы закончили. Вы можете видеть, как анимируются ваши градиенты:

View Full Code in Codepen: