using a div to blur an image behind it?

Question

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

something like this:

enter image description here

Could this be done somehow with -webkit maybe?

score 37 · Accepted Answer · edited May 26 '16 at 14:08

37

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!

edited May 26 '16 at 14:08

Jacob van Lingen

8,989
7
48
78

answered Oct 30 '13 at 16:27

Dre

2,933
2
18
21

16

For support of the `backdrop-filter` see: http://caniuse.com/#feat=css-backdrop-filter – Jacob van Lingen May 26 '16 at 14:09
**it actually is possible with CSS alone** https://stackoverflow.com/a/38543010/7543162 – oldboy Mar 29 '19 at 18:58
3

`backdrop-filter` can now be used in all major browsers (August 2019) – magikMaker Jul 31 '19 at 14:20
2

@magikMaker it's not currently supported by Firefox, but they're working on it https://bugzilla.mozilla.org/show_bug.cgi?id=1178765 – Brian Poole Aug 05 '19 at 21:38

score 4 · Answer 2 · answered Oct 30 '13 at 16:03

4

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/

answered Oct 30 '13 at 16:03

Tim Ebenezer

2,714
17
23

2

Ow that's a shame, never mind! would of been a nice feature – Dr Robotnik Oct 30 '13 at 16:06

using a div to blur an image behind it?

2 Answers2

Linked

Related