Blur the edges of an image or background image with CSS

Question

I know there are a bunch of new CSS filters and I am wondering if there is a way to apply those to an image or background image. Everything I have read talks about softening the image with a drop shadow, however, a drop shadow is a color, and I want to blur the edges of images so that I could blend them together more seamlessly if they were next to each other. Right now it looks like you can only go with a drop shadow or apply a blur to the entire image (based on what I have read).

The closest I can come up with is a semi-transparent box shadow....like this

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); -moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 

Answer 1

If what you're looking for is simply to blur the image edges you can simply use the box-shadow with an inset.

Working example: http://jsfiddle.net/d9Q5H/1/

HTML:

<div class="image-blurred-edge"></div> 

CSS

.image-blurred-edge {     background-image: url('http://lorempixel.com/200/200/city/9');     width: 200px;     height: 200px;     /* you need to match the shadow color to your background or image border for the desired effect*/     box-shadow: 0 0 8px 8px white inset; }