backdrop-filter test page

Hint: to see anything special here, either use Safari on El Capitan or higher

or use Google Chrome, go to chrome://flags, search for "#enable-experimental-web-platform-features" and turn that on. Restart the browser and come back here.


-webkit-backdrop-filter:blur(10px); box-shadow:0px 5px 10px black; border:solid 5px rgba(0, 0, 0, 0.5);

the border should be blurred, but the shadow shouldn't (especially targeted to Safari)

this is a test using
-webkit-backdrop-filter:blur(10px);
box-shadow:0px 5px 10px black;
border:solid 5px rgba(0, 0, 0, 0.5);
the border should be blurred, but the shadow shouldn't (especially targeted to Safari)

backdrop-filter:blur(10px); box-shadow:0px 5px 10px black; border:solid 5px rgba(0, 0, 0, 0.5);

the border should be blurred, but the shadow shouldn't (especially targeted to Chrome)

this is a test using
backdrop-filter:blur(10px);
box-shadow:0px 5px 10px black;
border:solid 5px rgba(0, 0, 0, 0.5);
the border should be blurred, but the shadow shouldn't (especially targeted to Chrome)

backdrop-filter:blur(10px); border:solid 5px rgba(0, 0, 0, 0.5);

the border should be blurred, but the shadow shouldn't (especially targeted to Chrome)
This one is produced by a surrounding box casting the shadow, while the backdrop filter is applied to the inner box. This didn't work in Chrome 52, but it worked in like 58 I think.

this is a test using
backdrop-filter:blur(10px);
border:solid 5px rgba(0, 0, 0, 0.5);
the border should be blurred, but the shadow shouldn't (especially targeted to Chrome)

-webkit-backdrop-filter:blur(10px); border:solid 5px rgba(0, 0, 0, 0.5);

the surrounding border should be blurred (especially targeted to Safari)

this is a test using
-webkit-backdrop-filter:blur(10px);
border:solid 5px rgba(0, 0, 0, 0.5);
the surrounding border should be blurred (especially targeted to Safari)

backdrop-filter:blur(10px); border:solid 5px rgba(0, 0, 0, 0.5);

the surrounding border should be blurred (especially targeted to Chrome)

this is a test using
backdrop-filter:blur(10px);
border:solid 5px rgba(0, 0, 0, 0.5);
the surrounding border should be blurred (especially targeted to Chrome)

-webkit-backdrop-filter:blur(10px); box-shadow:0px 5px 10px black;

the surrounding shadow shouldn't be blurred (especially targeted to Safari)

this is a test using
-webkit-backdrop-filter:blur(10px);
box-shadow:0px 5px 10px black;
the surrounding shadow shouldn't be blurred (especially targeted to Safari)

backdrop-filter:blur(10px); box-shadow:0px 5px 10px black;

the surrounding shadow shouldn't be blurred (especially targeted to Chrome)

this is a test using
backdrop-filter:blur(10px);
box-shadow:0px 5px 10px black;
the surrounding shadow shouldn't be blurred (especially targeted to Chrome)

-webkit-backdrop-filter:blur(10px);

there is no surrounding area that could look blurred (especially targeted to Safari)

this is a test using
-webkit-backdrop-filter:blur(10px);
there is no surrounding area that could look blurred (especially targeted to Safari)

backdrop-filter:blur(10px);

there is no surrounding area that could look blurred (especially targeted to Chrome)

this is a test using
backdrop-filter:blur(10px);
there is no surrounding area that could look blurred (especially targeted to Chrome)

Backdrop-Filter combined with some transition and opacity (causes problems on the Fujiama 2019 micro page since Chromium 77)

Since Chromium 77, backdrop-filter causes problem when the transparent object has a reduced opacity. opacity:0.0 causes a black area of the given (correct) shape.
For those who can't see (because some divs are invisible): there are 6 divs, 2 are opacity 1.0, 2 are opacity 0.25, 1 is totally invisible (black area on chrome 77), 1 is opacity 0.2 and has backdrop-filter:saturate(0.0) instead of blur(10px) - also causes a dark shape on Chromium 77.

this is a test using
backdrop-filter:blur(10px);
normal (targeted to both Chrome and Safari)
this is a test using
backdrop-filter:blur(10px);
tilt 45deg (targeted to both Chrome and Safari)
this is a test using
backdrop-filter:blur(10px);
opacity 25% (targeted to both Chrome and Safari)
this is a test using
backdrop-filter:blur(10px);
opacity 25%, tilt 45deg (targeted to both Chrome and Safari)
this is a test using
backdrop-filter:blur(1px);
opacity 0 (targeted to both Chrome and Safari)
this is a test using
backdrop-filter:saturate(0.0);
opacity 20% (targeted to both Chrome and Safari)
Update (Aug 6 2019): When I said, Chrome 77 caused problems, I ment Chrome Dev 77.
Today, please welcome the stable backdrop-filter in the latest Chrome 76 stable update! Backdrop-filter is now fully supported and enabled by default. And it is fast on my Android Device while former experiences with backdrop-filter:blur() caused serious performance issues. No need to enable the experimental-web-platform-features flag. A big thank you to all the developers - you're late, but you did a good job.