Background Blur Filter

Currently, we can use filter: blur(); to blur apply a gaussian blur to an element, however, there is no easy way to blur the content behind an element. iOS 7 made this kind of visual quite popular, but there is no good way to implement this kind of thing on the web.

I’d propose using the filter syntax for something like this.

filter: background-blur(10px);

This would apply blur anything behind the element, assuming the element has a transparent background.

This topic was brought up on the public-fx and www-style mailing lists before. Please reply the www-style thread.