Currently utilizing Bootstrap v5.2, I am endeavoring to replicate the image displayed in the link below:
As per the MDN Documentation, backdrop-filter is intended for blurring the background of an element.
.offcanvas-backdrop {
backdrop-filter: blur(10px);
-webkit-filter: blur(10px);
}
Despite trying the above method, it failed to produce the desired outcome, prompting me to experiment with the CSS filter instead:
<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');
}
Unfortunately, this alternative approach also yielded unsatisfactory results.
I kindly seek assistance and guidance from the community on this matter.