How to disable backdrop-filter: blur from content inside a div?

Question

I have a problem with this CSS property. I created a modal containing Inputs and labels and I just want to blur the content on the background. The problem is that blur is applying also on everything inside a container including text and inputs. I don't know how to fix this problem. Here's my container code:

const StyledModal = styled.div`
  position: relative;
  overflow: auto;
  z-index: 100;
  width: fit-content;
  max-height: fit-content;
  padding: 47px 41px 61px;
  display: flex;
  border: 1px solid ${({ theme }) => theme.colors.primary};
  border-radius: ${({ theme }) => theme.borderRadiusLarge};
  background: linear-gradient(
    180deg,
    rgba(92, 192, 190, 0.4) 0%,
    rgba(92, 192, 190, 0.4) 100%
  );
  backdrop-filter: blur(200px);
`;

Thanks in advance for all the helpful answers!

Will this question help you? - https://stackoverflow.com/questions/66600045/html-css-hover-blur-but-i-dont-want-blur-button/66600174#66600174 — s.kuznetsov, Mar 15 '21 at 11:01

score 1 · Accepted Answer · answered Mar 15 '21 at 11:08

I created another element for the backdrop and gave it a negative index to be behind every other element.

.parent {
  position: relative;
  height: 250px;
  width: 250px;
  z-index: 0;
  background-image: url('https://picsum.photos/id/237/200/300');
  background-size: cover;
  background-repeat: no-repeat;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(20px);
  z-index: -1;
}

<div class="parent">
  <div class="background"></div>
  Text not getting blurred
</div>

How to disable backdrop-filter: blur from content inside a div?

1 Answers1