using a div to blur an image behind it? [duplicate

Question

This question already has an answer here:

• How to use CSS (and JavaScript?) to create a blurred, “frosted” background? 8 answers

Is it possible to code a div to enable it to blur whatever image is under it?

something like this:

Could this be done somehow with -webkit maybe?

Answer 1

Unfortunately this can't be done purely using CSS. Although webkit-filter supports blur, it doesn't support blurring anything other than the element that it applies to.

There is a more hacky way to do this, described here - http://css-tricks.com/blurry-background-effect/

Answer 2

Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this

UPDATE: Looks like backdrop-filter was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!