Blur Img's & Div's in HTML using CSS

Is it possible to apply a blur to an HTML element(div & img)?

I am developing solely for the iPad so cross-browser compatibility is not an issue & I can use HTML5 CSS3 techniques.

I know how to blur text but this CSS doesn't blur the actual HTML element or its border:

text-shadow: 0 0 8px #000;
color: transparent;

I googled this but it doesn't blur the image in my browsers:

filter: blur(strength=50);

Solution 1:

I saw a cool tutorial today about blurring content with CSS box-shadows, text-shadows, opacity, and color.

Here's the demo: http://tympanus.net/Tutorials/ItemBlur/

And the tutorial: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Solution 2:

Webkit has a property called -webkit-filter that allows for the techniques of blurring: -webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

Solution 3:

You can simply add this to your css, for an image:

In the following example, you'll be using a blur with 5 pixels of radius. And it is extremely important to use all vendor prefixes available, so it works on all browsers with this feature implemented, untile it comes to a "stable" version.

img{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}