'blur the side of the site

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

htmlcss


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Satyam Mishra

Related Questions