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.
other filters than blur(...)
Backdrop-filter offers other filters than blur(...).
But I have to admit that I didn't use much of it yet (unless its saturation combined with blur).
Let's welcome Firefox 70 to the family of backdrop-filter-capable browsers and test some things.
But before let me explain why I add these tests:
on my very System (El Capitan on a MacBook5,2), Firefox just reports backdrop-filter-capability to
the CSS-Style-switch (@supports ...).
But there is nothing to see that looks like any applied backdrop-filter (at least blur).
Now I try to create some other filters:
backdrop-filter:blur(10px); box-shadow:0px 5px 10px black;
this is a test using
(-webkit- / -moz-)backdrop-filter:blur(10px);
backdrop-filter:saturate(0%);
this is a test using
(-webkit- / -moz-)backdrop-filter:saturate(0%);
backdrop-filter:invert(100%);
this is a test using
(-webkit- / -moz-)backdrop-filter:invert(100%);
backdrop-filter:invert(100%) hue-rotate(180deg);
this is a test using
(-webkit- / -moz-)backdrop-filter:invert(100%) hue-rotate(180deg);
just to have some fun and invert the brightness only.
On an Apple MacBook5,2 featuring an Nvidia 9400M there is nothing to see.
I'll check out my other computers as soon as I have time to ...
EDIT: you also have to set "gfx.webrender.enabled" to "true" in about:config.
At least this works on my PC (Debian 10.1, Nvidia GTX 950).
