Blur the edges of an image or background image with CSS

css, filter, html

Solution

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/

Code snippet:

.image-blurred-edge {
  background-image: url('https://picsum.photos/200/300');
  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;
}

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

Problem

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

Original source