Why text getting blur in a card on scroll

Question

In snippet it is showing okay. But on scroll why the text on the card on the scroll becoming blurry? Is the problem is with the background or text itself.

  .text .story-description {
    width: 321px;
    border-radius: 20px;
    background: radial-gradient(76.31% 191.89% at 13.43% 22.19%,
        rgba(226, 228, 231, 0.8) 0%,
        rgba(228, 228, 229, 0.368) 100%);
    backdrop-filter: blur(10px);
    padding: 23px;
  }
  .text p {
    font-family: "Lato";
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 149%;
    color: #263244;
  }

  <div class="text">
          <div style="margin-inline: 20px">
            <div class="story-description">
              <p>
                Traditional banks don’t focus on customers' experience, their
                systems may be slow and outdated, they may prioritize a specific
                group of people, or perhaps they lack the ability to innovate,
                and so on.
              </p>
            </div>
          </div>
        </div>