Blur the edges of an image or background image with CSS

Question

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/

Screenshot

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>

Leave a Comment Cancel reply