I am using Bootstrap v5.2 and am trying to replicate the following image.

Blurry Sidebar Backdrop

According to MDN Documention, backdrop-filter is used to blur the background of the element.

.offcanvas-backdrop {
    backdrop-filter: blur(10px); 
    -webkit-filter: blur(10px);
}

But, this didn't work so I tried with the CSS filter:

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

.offcanvas-backdrop{
    filter: blur(10px);
    -webkit-filter:blur(10px);
    filter: url($blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}

But this also didn't work.

I would appreciate the help from the community.