Mesh + Grain

<!-- Mesh + Grain -->
<div class="nuda-gradient-noise-mesh" role="img" aria-label="Mesh gradient with grain overlay"></div>

.nuda-gradient-noise-mesh {
  position: relative;
  width: 240px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  background: #09090b;
  background-image: radial-gradient(45% 55% at 25% 30%,#e4ff54 0%,transparent 60%),radial-gradient(50% 55% at 80% 35%,#a855f7 0%,transparent 60%),radial-gradient(50% 60% at 45% 85%,#22d3ee 0%,transparent 60%);
  animation: nuda-gradient-noise-mesh-shift 12s ease-in-out infinite alternate;
}

.nuda-gradient-noise-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(#fff 1px,transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  animation: nuda-gradient-noise-mesh-grain .6s steps(4) infinite;
}

@keyframes nuda-gradient-noise-mesh-shift {
  0% {
    background-position: 0% 0%,100% 0%,50% 100%;
  }
  100% {
    background-position: 25% 20%,75% 25%,40% 80%;
  }
}

@keyframes nuda-gradient-noise-mesh-grain {
  0% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(-1px,1px);
  }
  50% {
    transform: translate(1px,-1px);
  }
  75% {
    transform: translate(-1px,-1px);
  }
  100% {
    transform: translate(1px,1px);
  }
}

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