Gradient Mesh

<div class="nuda-gradient-mesh" aria-hidden="true"></div>

/* Gradient Mesh
   Animated multi-blob gradient background.
   Customize: --mesh-c1 through --mesh-c4 */

.nuda-gradient-mesh {
  --mesh-c1: #6366f1;
  --mesh-c2: #ec4899;
  --mesh-c3: #06b6d4;
  --mesh-c4: #f59e0b;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  width: 100%;
  min-height: 300px;
}

.nuda-gradient-mesh::before,
.nuda-gradient-mesh::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  will-change: transform;
}

.nuda-gradient-mesh::before {
  background: radial-gradient(circle, var(--mesh-c1), var(--mesh-c2));
  top: -10%;
  left: -10%;
  animation: nuda-mesh-blob1 8s ease-in-out infinite alternate;
}

.nuda-gradient-mesh::after {
  background: radial-gradient(circle, var(--mesh-c3), var(--mesh-c4));
  bottom: -10%;
  right: -10%;
  animation: nuda-mesh-blob2 10s ease-in-out infinite alternate;
}

@keyframes nuda-mesh-blob1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30%, 20%) scale(1.2); }
}

@keyframes nuda-mesh-blob2 {
  0% { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-25%, -15%) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-gradient-mesh::before,
  .nuda-gradient-mesh::after {
    animation: none;
  }
}