How to implement Gaussian blur on a web page?

Question

css

How to implement Gaussian blur on a web page so that under the element to which the effect is applied, all content (text, shapes, pictures, etc.) is blurred, and not just the background?
Example

Where on the site there will be something like icons, on top of which there will be windows blurring the entire background along with icons,
or animated widgets with a blur effect.

Answer 1

Did it in a minute on my knee. Blurring can be controlled from the css class .blurred
https://jsfiddle.net/twobomb/Lt6qxa62/

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 3

https://www.google.com.ua/webhp?sourceid=chrome-in...

Answer 4

Stupid answer - how about photoshop by script and autofill to the cloud? and preview screen. and everything is virtual. the power of photoshop is in your hands kiddie, in your fingers, feel it.