How can I make bootstrap modal background get a blur effect

Question

I would like to figure it out what's the best way to make the background of an open modal form to be with a blur effect.

I've tried with the following CSS code:

`body.modal-open >:not(.modal) {
    -webkit-filter: blur(5px) grayscale(90%);
    filter: blur(5px) grayscale(90%);
}`

But it ends up applying it to the whole modal including the content and I ran out of ideas on how to achieve that effect.

This is the code that triggers the modal where I've been trying to apply the CSS styles.

`

<button
    type="button"
    id="modal"
    className="btn btn-primary"
    data-toggle="modal"
    data-target="#exampleModalCenter">
      Agendar una Cita
  </button>
  <div
      className="modal fade"
      id="exampleModalCenter"
      tabIndex="-1"
      role="dialog"
      aria-labelledby="exampleModalCenterTitle"
      aria-hidden="true">
`

The project was set up originally using create-react-app and the Bootstrap framework.

This is the actual look of the modal when is open, however, I would like it to have a blurred background.

Modal:

Duplicate question: https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image Multiple answers to choose from, my preferred method would be using `backdrop-filter` in place of `filter` if you can stand to give up Firefox support. — JoshuaCWebDeveloper, Feb 03 '19 at 19:51

score 0 · Answer 1 · answered Feb 03 '19 at 20:09

Remember that if you blur an element, then it will blur that element and all the child-elements as well. So what you would need to do, is to position two elements right on top of each-other, - and then blur the one in the back.

Example.

Here's the essence:

The CSS

.BLURRED-BOX {
  background: blue;
  color: white;
  -webkit-filter: blur(5px) grayscale(90%);
  filter: blur(5px) grayscale(90%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 90;
}


.NOT-BLURRED-BOX {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  width: 300px;
  height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

.NOT-BLURRED-BOX img {
  max-width: 100%;
  height: auto;
}

The (important) HTML

This is what's inside the modal.

<div class="modal-body">
  <div class="BLURRED-BOX">
    <p>I am a blurred box</p>
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="NOT-BLURRED-BOX">
    <p>I am a not blurred box</p>
    <img src="https://media0.giphy.com/media/1lI97corSEnZu/giphy.gif?cid=3640f6095c5748f668686b6a497d5f5d" />
  </div>
</div>

How can I make bootstrap modal background get a blur effect

1 Answers1

The CSS

The (important) HTML