CSS: Анимированный градиент фона (Animated Gradient)

Создаёт плавно переливающийся фон с помощью CSS-анимации градиентов. Используется на лендингах и карточках для живого эффекта.

.gradient-bg {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
}

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

• Используется: фоновые блоки, кнопки, хедеры.
• Совет: уменьшите background-size для более интенсивного перелива.
• Совместимость: поддерживается всеми современными браузерами.

Пример