blure side site [1]: https://i.stack.imgur.com/giurR.jpg
how to blur the side of a website : https://i.stack.imgur.com/bIgfz.png
#main-style {
position: relative;
}
#main-style::after {
content: "";
width: 100%;
height: 135%;
position: absolute;
top: -30px;
left: 0;
overflow: hidden;
filter: blur(5px);
}
this code don't work
CodePudding user response:
Just replace the code where you wrote: filter: blur(5px);
with backdrop-filter: blur(5px)
Explanation:
The code you wrote earlier works by taking a snapshot of the element and display the snapshot with blurred effect at the place of the element.
backdrop-filter
, instead blurs the background of the element.
Note:
As of now, backdrop-filter
does not work with Firefox Browsers.