Backdrop-filter blur, blurry edge

Design help Custom code
1

Hello !

At the moment I facing a problem with the blur effect using backdrop-filter.

.blur-box-d {    
    -webkit-backdrop-filter: blur(20px) brightness(0.75); 
       -moz-backdrop-filter: blur(20px) brightness(0.75);
        -ms-backdrop-filter: blur(20px) brightness(0.75);    
            backdrop-filter: blur(20px) brightness(0.75);
}

The thing is, by using this method, I try to get a clean “cut” between the div who get the blur effect and the background under it. example :
clean_edge

But instead I get a blurry edge. example :
blurry_edge

Here is some links : Live project link / Read Only link

Is there any way to fix this ?
Thanks in advance for your help !

1 Like