title: How can I make bootstrap modal background get a blur effect
body: <p>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.</p>
  
  <p>I've tried with the following CSS code: </p>
  
  <pre><code>`body.modal-open &gt;:not(.modal) {
      -webkit-filter: blur(5px) grayscale(90%);
      filter: blur(5px) grayscale(90%);
  }`
  </code></pre>
  
  <p>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.</p>
  
  <p>This is the code that triggers the modal where I've been trying to apply the CSS styles.</p>
  
  <p>`</p>
  
  <pre><code>&lt;button
      type="button"
      id="modal"
      className="btn btn-primary"
      data-toggle="modal"
      data-target="#exampleModalCenter"&gt;
        Agendar una Cita
    &lt;/button&gt;
    &lt;div
        className="modal fade"
        id="exampleModalCenter"
        tabIndex="-1"
        role="dialog"
        aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true"&gt;
  `
  </code></pre>
  
  <p>The project was set up originally using create-react-app and the Bootstrap framework.</p>
  
  <p>This is the actual look of the modal when is open, however, I would like it to have a blurred background.</p>
  
  <p>Modal:</p>
  
  <p><a href="https://i.stack.imgur.com/2bp3F.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2bp3F.jpg" alt="enter image description here"></a></p>