Estoy usando Bootstrap v5.2 y estoy tratando de replicar la siguiente imagen.

Telón de fondo borroso de la barra lateral

Según MDN Documentation, el filtro de fondo se usa para desenfocar el fondo del elemento.

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

Pero esto no funcionó, así que probé con el filtro CSS:

 <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'); }

Pero esto tampoco funcionó.

Agradecería la ayuda de la comunidad.