Cannot get blurry background when Bootstrap modal is opened

Question

I am usingBootstrap 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 here: https://codepen.io/kikosoft/pen/YzjxOQm

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 need to change in CSS and HTML structure according below code.

---

Using backdrop-filter

 .modal-open.modal-backdrop { backdrop-filter: blur(5px); background-color: rgba(0, 0, 0, 0.5); opacity: 1;important; }

 <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <h1>This text should get blurred when the modal is opened.</h1> <.-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <.-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body">... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

---

Using filter

 .modal-open.main-wrapper { filter: blur(5px); }

 <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="main-wrapper"> <h1>This text should get blurred when the modal is opened.</h1> <.-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> </div> <.-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body">... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Answer 2

i dont have enough rep for comment so i write my answer here:

you should apply your style to #exampleModal

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