I want to blur the background of modal when the modal is triggered but because my modal is inside the container it is blurring everything when modal is shown. I was wondering if there is any way to not have my modal blurred too but only from inside below style.

Main part where I most likely want changes :

<style>
     .modal-open .container-fluid, .modal-open .container :not(.modal fade)    
      {
        -webkit-filter: blur(5px) 
         grayscale(90%);
       }
    </style>

Rest of the css for modal :

<style>
  .modal-header {
    background: #301a16;
    color: #ffffff;
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    flex-flow: row-reverse;
    text-align: center;
    padding: 0 20px;
    padding-bottom: 5px;
    .close {
        color: yellow;
        opacity: 100;
        display: flex;
        // align-self: flex-start;
        padding-top: 5px;
    }
   
}
}

// modal title text logo
h3 {
    &#myModalLabel {
        flex: 1;
        text-transform: uppercase;
        span {
            color: white;
        }
    }
}

a.back,
a.next,
a.back:focus,
a.next:focus,
a.back:active,
a.next:active {
    color: white;
    background: #ffc233;
    padding: 10px 60px;
    margin: 0;
    font-weight: bold;
}

a.back:hover,
a.next:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-footer {
    display: flex;
}

.right-footer {
    flex: 1;
}

// prevent nav tabs from collapsing on mobile
// using flex to fill the modal width
// otherwise use table-cell and float
.nav-justified {
    display: flex;
    li {
        flex: 1;
        // display: table-cell;
        // float: left;
    }
}
    
    /* Style the input fields */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

  </style>

Whole of my Modal :

        <!-- Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    
    <div class="modal-content">
      <div class="modal-header text-center">
        
        <h4 class="modal-title w-100" id="paymentModalLabel">Complete Payment</h4>
      <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">X</span>
                    <span class="sr-only">Close</span>
                </button>
      </div>
      
      <div class="modal-body">
        <div class="modal-split">
          
          <?php $imgname="https://website.com/zp/pay/qr/$uniname.png"; ?>
          <center><img id="qr" height=360px; src="<?php echo $imgname; ?>" id="reloader"
onLoad="setTimeout(document.getElementById('reloader').src='<?php echo $imgname ?>' ? +new Date().getMilliseconds(),5000)"/></center>
        
        </div>
        
        <div class="modal-split">
        <div class="row mt-4">
        
            
            <div class="form-group">
            
            

            <form name="utr" method="post" action="https://website.com/cart/payment_methods/_upipay.php" onsubmit = 'return false;' id = "utrsubmit" class="needs-validation" novalidate>
                                    <div class="col-md-12"><span> <input type="text" name="utr" value="<?php
if (isset($_GET['utr'])) {
    $utr = $_GET['utr'];                                
   echo $utr;
} ?>" aria-label="UTR" class="form-control form_data" placeholder="some text" minlength="12" maxlength="12" onkeyup="validate(this)" required>
                                      <span id="utrerror" class="text-danger"></span>
                    
                                      </div>
                                      <div class="valid-feedback">
        Must be some digit Number!
      </div>
                                      
                                      </span>
                                </div>
              <div class="button">
              <button type="submit" disabled id="btnSave" name="submit" class="btn btn-success">Submit</button></div>
              </form>
          

    
    
                                <div class="col-md-12"> <span>
                                  </br>
                             <div class="alert alert-primary" role="alert"> <b>Tip</b> : Some text here
                                </span> 
          </div>
            
          </div>
          
        </div>
         </div>
        
      
        <div class="modal-split">
         <?php $this->load->view("cart/payment_methods/_upipay", $data); ?>
          
        </div>  

      </div>

      <div class="modal-footer">
 <!--Nothing Goes Here but is needed! -->
      </div>
    </div>
  </div>
</div>

If not the css selector part.. how can I successfully blur the background of the modal with css and js ?