Bootstrap modal with blurry background (Bootstrap 3,4,5)

blur-bs3-bs4.css

/* Compatible with Bootstrap 3 and 4 */

body.modal-open > :not(.modal) {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

blur-bs5.css

/* Compatible with Bootstrap 5, thanks @imikh */

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

Thank's ;)

Thank you!

it's a good solution, but i have a case in which i'm using React-Bootstrap and I've used your solution but when the dialog opens and if there is an error occurred the dialog will be wiped away but the screen still blurry and i can't see the error because of the filter styles.

it's a good solution, but i have a case in which i'm using React-Bootstrap and I've used your solution but when the dialog opens and if there is an error occurred the dialog will be wiped away but the screen still blurry and i can't see the error because of the filter styles.

This is because when an error occured: The modal-open class is still on your BODY tag, you need to remove it by yourself.

Thank you!

Doesn't work in Bootstrap 5.3.
But this one works:

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

Doesn't work in Bootstrap 5.3. But this one works:

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

Thanks @imikh for your contribution, gist updated.

Doesn't work in Bootstrap 5.3. But this one works:

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

This is working in Bootstrap 5.3+! ✅✅✅

Great, thanks @imikh!