0

I have 2 adjacent divs - One is used to cover everything in the background and one is used as the modal. How can i blur everything behind the modal?

Currently im using this and its not working

  <Outer></Outer>
  <Inner isOpen={isOpen}></Inner>

and the CSS for outer

  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;

  
  background:black;
  background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
  • Does this answer your question? [How can I make a CSS glass/blur effect work for an overlay?](https://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay) – innerurge1 Oct 19 '20 at 21:18
  • Have a look at https://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay – innerurge1 Oct 19 '20 at 21:18

0 Answers0