Анимированный градиентный фон

Красивый анимированный градиентный фон с плавным изменением цветов, реализованный исключительно на CSS. Использование анимации по ключевым кадрам для изменения позиции фона создает эффект плавного перетекания цветов.

Код реализации

Скопируйте следующий код и используйте его в своем проекте.

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

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

Пояснение

Два ключевых момента этого анимированного фона:

1. background-size: 400% 400%: Устанавливает размер градиента в 4 раза больше элемента, расширяя его за пределы видимой области.
2. @keyframes gradient-flow: Плавное перемещение background-position от 0% к 100%, а затем обратно к 0% создает видимость движения расширенного градиента и изменения цветов.

Изменяя цвета linear-gradient или продолжительность animation в секундах, можно настроить эффект под тему вашего сайта.