html - 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);

question from:https://stackoverflow.com/questions/24709915/blur-the-edges-of-an-image-or-background-image-with-css

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;
}