Sometimes, we want to change background opacity when Bootstrap modal is open with CSS.

In this article, we’ll look at how to change background opacity when Bootstrap modal is open with CSS.

How to change background opacity when bootstrap modal is open with CSS?

To change background Opacity when Bootstrap modal is open with CSS, we set the opacity style in the modal-backdrop class.

For instance, we write

.modal-backdrop {
  opacity: 0.5 !important;
}

to set the elements with class modal-backdrop to have opacity 0.5.

Conclusion

To change background Opacity when bootstrap modal is open with CSS, we set the opacity style in the modal-backdrop class.