Живой градиент

Огромные размытые пятна дрейфуют по тёмному фону, заголовок врастает через blend.

Просто смотрите.

живой градиент

Код

<section class="mesh">
  <i class="b b1"></i><i class="b b2"></i><i class="b b3"></i>
  <h1>Контент</h1>
</section>

<style>
.mesh { position: relative; overflow: hidden; background: #0e0b1e; }
.mesh h1 { position: relative; }        /* контент поверх пятен */
.b { position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .85; }   /* мягкие цветовые пятна */
.b1 { width: 52vw; height: 52vw; background: #E84B16;
  top: -18%; left: -12%; animation: drift 16s ease-in-out infinite; }
.b2 { width: 44vw; height: 44vw; background: #3b46e0;
  bottom: -22%; right: -10%;
  animation: drift 19s ease-in-out -6s infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(9vw,-6vh) scale(1.15); }
  66% { transform: translate(-7vw,7vh) scale(.9); } }
</style>

Промпт для ИИ

Сделай живой градиентный фон (gradient mesh): тёмная секция с overflow:hidden, внутри 3 огромных круга-пятна (40-50vw) разных цветов с filter: blur(80px) и opacity .85, каждый дрейфует своей анимацией translate+scale 16-22s ease-in-out infinite с разными задержками и reverse. Заголовку поверх — mix-blend-mode: overlay для «врастания» в градиент. При prefers-reduced-motion пятна статичны.