<section>
  <div class="isolate">
    <div class="noise"></div>
    <div class="overlay"></div>
  </div>
</section>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  background-color: powderblue;
}

section {
  position: relative;
  width: 400px;
  height: 100px;
  box-shadow: rgb(50 50 93 / 20%) 0px 30px 60px -12px, rgb(0 0 0 / 28%) 0px 18px 36px -18px;}

.noise {
  height: 100%;
  background: linear-gradient(20deg, rebeccapurple, transparent), url(https://grainy-gradients.vercel.app/noise.svg);   
  filter: contrast(170%) brightness(1000%);
}

/* Chrome-specific */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .noise {
    filter: contrast(290%) brightness(1000%);
  }
}

.isolate {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: moccasin;
  mix-blend-mode: multiply;
}