title: How to get a background frosted glass effect without using background image
body: <p>I'm trying to make a modal window in react with a blured backdrop. What I'm trying to achieve is to <strong>blur the backdrop content</strong> and <strong>Not bluring the background image</strong> since there's no image just the content behind the modal window.
  So far I've come across these solutions <a href="https://css-tricks.com/frosting-glass-css-filters/" rel="nofollow noreferrer">frosting glass</a>, <a href="https://medium.com/@AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91" rel="nofollow noreferrer">frosting glass</a> and <a href="https://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay">glass effect</a> but all of them use background image to apply the blur effect but that's not what I'm looking for.</p>
  
  <p>react component:</p>
  
  <pre><code>import React from "react";
  import './index.scss';
  
  
  
  
  const Modal = ({ handleClose, show, children }) =&gt; {
      return (
              &lt;div class="modal display-block"&gt;
                 &lt;div class="modal-container"&gt;
                    &lt;section class="modal-main"&gt;
                        &lt;div class="row no-gutters header"&gt;
                            &lt;div class="col"&gt;
                               &lt;i class="fa fa-lg fa-close"&gt;&lt;/i&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="row no-gutters content"&gt;&lt;/div&gt;
                    &lt;/section&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
      );
  };
  
  export default Modal;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>@import 'yelStrap/_variables.scss';
  
  
  
  
  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width:100%;
      height: 100%;
    }
  
  .modal-container {
    background: inherit;
    position: absolute;
    top: 50px;
    right: 250px;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }
  
  .modal-container::before{
    content: '';
    width: 100% ;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; 
    background-color: rgba(255, 255, 255, 0.5);
    filter: blur(6px);
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
      -ms-filter: blur(6px);
   }
  
  .modal-main {
    position: relative;
    background: white;
    width: 90%;
    min-height: 352px;
    top: 10%;
    left: 0px;
    right: calc(10% / 2);
    padding: 10px;
    background-color: $white;
    border-radius: 5px;
    box-shadow: 0 0 12px 2px rgba(20, 150, 255, 0.15);
    z-index: $zindex-modal;
  }
  
  .fa-close {
    color: $water-disabled;
    cursor: pointer;
  }
  
  .display-block {
    display: block;
  }
  
  .display-none {
    display: none;
  }
  </code></pre>
  
  <p>when I add background image to the .modal-container::before it works but with background color it doesn't!</p>
  
  <p>Any help is appreciated,
  thanks.</p>