Background blur filter - backdrop-filter: blur () is already in operation, but

sergio_follean — Fri, 13 Sep 2019 14:34:40 +0000

Already, many browsers include support for background effects of the backdrop-filter, and they can be used to create the blur effect like Apple (see iOS, MacOS).

How it works?

For the block to be blurred, you need to add a style:

backdrop-filter: blur(degree of blur);

The simplest example:

But does it look like Apple? In the screenshot we have 10 pixels blur. Add a little more blur - 20 pixels, and what do we get:

We’ll get something strange, at the edges of the block the blur disappears altogether.

Why it happens? — It's hard to tell a person who is not versed in browsers.

Is there a solution to this? — Yes, it is rather strange and simple, but it works.

By a long search for a solution on the Internet, it was impossible to stumble upon something about this filter this year. After about a dozen decisions of the type to create an after element with a size larger than a block, blur it, and give its parent overflow: hidden, the following was noticed:

Adding a shadow to the object, it expands the blur area, and the idea arose to make a transparent shadow, this turned out to be the right decision, and the result was as expected:

I wish you successful use. look at the source code of the solution and play with it here: https://codepen.io/sergey-popovich/pen/dybepBv

DEV Community: sergio_follean

Background blur filter - backdrop-filter: blur () is already in operation, but