title: Blur the edges of an image or background image with CSS
body: <p>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).</p>
  
  <p>The closest I can come up with is a semi-transparent box shadow....like this</p>
  
  <pre><code>-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);
  </code></pre>