using a div to blur an image behind it?

css html webkit blur
Dr Robotnik picture Dr Robotnik · Oct 30, 2013 · Viewed 46.5k times · Source

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?

Answer

Dre picture Dre · Oct 30, 2013

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!

Related questions

Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute: list-style-image And then giving it a URL. However, in my case, I just want to use the '+' symbol. I don't want …

Read More
HTML5 placeholder css padding

I've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate. Anyway, here is the code for the css. (EDIT: This is the generated …

Read More
text-align: right on <select> or <option>

Does anyone know if it's possible to align text to the right of a <select> or more specifically <option> element in WebKit. This does not need to be a cross-browser solution including IE, but should be …

Read More