Menu
backdrop-filter is a recent CSS feature, that is not yet available in modern browsers (at least as of July 1, 2016).
backdrop-filter via Experimental Web Platform flag.-webkit- prefixBeing in such an unusable state, I would like to know whether there exists any alternative way to bring in the same result.
JS workarounds for blur, grayscale,… are also welcome
The development of backdrop-filter can be tracked through https://bugs.chromium.org/p/chromium/issues/detail?id=497522
312
hue-rotate(deg)
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
According to caniuse, backdrop-filter can be enabled in Firefox versions 70 and above. To enable this property, follow these steps: Open a new Firefox tab and type about:config in the address bar.
I use this to get the popular frosted glass effect. Until someone successfully invents a good polyfill for backdrop-filter I'm using a slightly transparent background as a fallback:
/* slightly transparent fallback */ .backdrop-blur { background-color: rgba(255, 255, 255, .9); } /* if backdrop support: very transparent and blurred */ @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { .backdrop-blur { background-color: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(2em); backdrop-filter: blur(2em); } } The filter will work in currently supported browsers. (Safari and Chrome with experimental Web Platform features enabled) The code should also work in future browsers that support unprefixed backdrop-filter if the spec doesn't change before that.
Examples without and with backdrop-filter support:
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With