CSS - Problem of blured div inside a blured div

Question

The problem is that I cannot use a blurred element inside another blurred element. I have a blurred header backdrop-filter: blur(3px); that has a div with a more blurry background backdrop-filter: blur(50px);, but its now work. Both are blurred by 3px. I need to save the structure and apply the effect, please tell me how this can be done?

https://jsfiddle.net/q1aymg02/42/





  
  






  
    Dont Blured
    By 50px
    Only 3px

user_14721427 · Answer

The backdrop-filter property in CSS is used to apply filter effects, and this behavior is inherited by all of its children. You might be interested in this approach.

 body {
    background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
   }

.header {
  
  backdrop-filter: blur(3px);
  padding: 15px;
  border: 1px solid #FFF;
}

.header ul a li {
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
  backdrop-filter: blur(50px);
}

.header ul a li::before {
   content: "";
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(50px);
}

.header ul a li.blured::before {
  content: "Dont Blured";
}

.header ul a li.by--50px::before {
  content: "By 50px";
}

.header ul a li.only--3px::before {
  content: "Only 3px";
}





  
  



  
    Dont Blured
    By 50px
    Only 3px

user_9517443 · Answer

I am not sure if this is the result you are looking for, but use can use this approach to blur the li elements

.header ul a li {
  filter: blur(1px);
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
}

It will blur everything, including the text.

CSS - Problem of blured div inside a blured div

2 Answers