.site-noise {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999999;

    /*
      Здесь управляется интенсивность шума:
      opacity — чем выше значение, тем заметнее шум.
      Например:
      0.04 — очень мягкий
      0.08 — средний
      0.15 — заметный
    */
    opacity: 0.08;

    /*
      Здесь управляется размер зерна:
      меньше значение — зерно мельче
      больше значение — зерно крупнее
    */
    background-size: 180px 180px;

    background-repeat: repeat;
    mix-blend-mode: soft-light;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.7'/%3E%3C/svg%3E");

    animation: noiseMove 0.8s steps(2) infinite;
  }

  @keyframes noiseMove {
    0% {
      transform: translate(0, 0);
    }

    25% {
      transform: translate(-2%, 1%);
    }

    50% {
      transform: translate(1%, -2%);
    }

    75% {
      transform: translate(2%, 1%);
    }

    100% {
      transform: translate(0, 0);
    }
  }
</style>

<div class="site-noise"></div>