Noise Overlay Gradient

<!--
  The grain is an inline SVG feTurbulence filter, not a PNG - zero network
  requests and it stays crisp at any density. Stacking order, bottom to top:
  gradient, grain, scrim, content. The scrim sits *above* the grain on
  purpose: it guarantees AA for the white text over both the gradient and the
  noise speckle, whatever opacity the grain runs at.

  One caveat that is invisible until it bites: SVG filter ids are
  document-global. Render this panel twice and both <rect>s resolve to the
  first filter - give each instance its own id.
-->
<section class="relative isolate w-full overflow-hidden rounded-2xl">
  <div
    class="absolute inset-0 -z-30 bg-[linear-gradient(135deg,#1e3a8a,#6d28d9,#be185d)]"
    aria-hidden="true"
  ></div>

  <svg class="absolute inset-0 -z-20 h-full w-full opacity-25 mix-blend-soft-light" aria-hidden="true">
    <filter id="gradient-noise-grain">
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" />
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <rect width="100%" height="100%" filter="url(#gradient-noise-grain)" />
  </svg>

  <div class="absolute inset-0 -z-10 bg-black/30" aria-hidden="true"></div>

  <div class="px-6 py-14 text-center sm:px-8 sm:py-20">
    <h2 class="text-2xl font-bold leading-tight tracking-tight text-white sm:text-4xl">
      Texture without the texture file
    </h2>
    <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-200">
      Film grain from a four-line SVG filter - the banding a smooth gradient
      shows on cheap panels disappears under it.
    </p>
  </div>
</section>