Cannot get blurry background when Bootstrap modal is opened

Question

I am using Bootstrap 5.1.3 and I would like to blur the background when a modal opens with the CSS backdrop-filter property.

The simplest approach I tried is:

.modal-backdrop {
    backdrop-filter: blur(5px);
}

Live demo

I am using the latest Firefox browser, but the results are the same in Chrome (Windows 11).

I tried many variants suggested everywhere, but none of them work. The background simply never gets blurred.

Can anybody get the background to blur with backdrop-filter? What am I missing here?

Answer 1

You should apply your style to the #exampleModal, as follows:

#exampleModal {
  backdrop-filter: blur(5px);
}