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)