Skip to content

Instantly share code, notes, and snippets.

@webprogramozo

webprogramozo/blur-bs3-bs4.css

Last active October 5, 2024 13:48
Show Gist options
  • Save webprogramozo/9684826e469e5dc375e98f65559e1509 to your computer and use it in GitHub Desktop.
Save webprogramozo/9684826e469e5dc375e98f65559e1509 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap modal with blurry background (Bootstrap 3,4,5)
Raw
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);
}
Raw
blur-bs5.css
/* Compatible with Bootstrap 5, thanks @imikh */
.modal {
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
@webprogramozo
Copy link
Author

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.

@asd-ez
Copy link

asd-ez commented Jun 2, 2021

Thank you!

@imikh
Copy link

imikh commented May 5, 2024

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

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

@webprogramozo
Copy link
Author

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.

@alinlinca10
Copy link

alinlinca10 commented May 16, 2024 •
edited
Loading

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment