<div class="bga-10">
  <div class="bga-10__scene">
    <div class="bga-10__blob bga-10__b1"></div>
    <div class="bga-10__blob bga-10__b2"></div>
    <div class="bga-10__blob bga-10__b3"></div>
    <div class="bga-10__blob bga-10__b4"></div>
  </div>
</div>

.bga-10, .bga-10 *, .bga-10 *::before, .bga-10 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-10 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-10__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #f4f1ff;
}

/* Several large blurred color blobs that morph and roam,
   creating a soft animated mesh-gradient look */
.bga-10__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.85;
  mix-blend-mode: multiply;
}
.bga-10__b1 { width: 460px; height: 460px; background: #ff8fab; top: -8%; left: -5%;
      animation: bga-10-roam1 20s ease-in-out infinite; }
.bga-10__b2 { width: 420px; height: 420px; background: #8fd3ff; top: 30%; right: -8%;
      animation: bga-10-roam2 24s ease-in-out infinite; }
.bga-10__b3 { width: 380px; height: 380px; background: #c4f5b0; bottom: -10%; left: 25%;
      animation: bga-10-roam3 18s ease-in-out infinite; }
.bga-10__b4 { width: 340px; height: 340px; background: #ffe28a; top: 20%; left: 35%;
      animation: bga-10-roam4 26s ease-in-out infinite; }

/* subtle grain to make the gradient feel premium */
.bga-10__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}

@keyframes bga-10-roam1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(120px, 80px) scale(1.2); }
  66%     { transform: translate(60px, 160px) scale(0.9); }
}
@keyframes bga-10-roam2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-140px, 60px) scale(1.15); }
}
@keyframes bga-10-roam3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-80px, -120px) scale(1.25); }
  70%     { transform: translate(100px, -40px) scale(0.95); }
}
@keyframes bga-10-roam4 {
  0%,100% { transform: translate(0,0) scale(1.1); }
  50%     { transform: translate(90px, -90px) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-10__b1,
  .bga-10__b2,
  .bga-10__b3,
  .bga-10__b4 {
    animation: none !important;
  }
}