I have seen this amazing demo of the new
-webkit-backdrop-filter: blur(Xpx);
and I would like to ask how to reproduce this with JavaScript that at least works in Chrome but possibly in Firefox too?
The Demo: https://webkit.org/demos/backdrop-filter/
Safari 3.1 to 8 doesn't not support CSS Backdrop Filter.
The newest release of Google Chrome makes it possible with just a couple lines of CSS, thanks to the implementation of the backdrop-filter property!
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.
While Firefox does not support the backdrop filter property, you can still test your web pages that use backdrop-filter. You can enable the property manually, however, just enabling it in your browser won't help, because it won't be enabled in your client's browser.
You could try svg filters:
http://codepen.io/MakiBM/pen/YGEgQK?editors=1000
<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
<defs>
<filter id="blur" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="10" in="SourceGraphic" result="blurImg"/>
<feComponentTransfer in="blurImg" result="opaqueBlur">
<feFuncA type="linear" intercept="1"/>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
</filter>
</defs>
<image filter="url(#blur)" x="10" y="10" id="svg-image" width="100%" height="100%" xlink:href="https://www.nycgovparks.org/photo_gallery/full_size/14413.jpg" />
<rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.2" />
</svg>
I haven't go round with crossbrowser check but support is very wide: http://caniuse.com/svg-filters
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