title: How to feather the edges of an image using CSS
body: <p>I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS.</p>
  
  <p>My site <a href="http://testsite24.byethost17.com/temp/index.html" rel="nofollow">found here</a> currenly has a feathered effect by using the following html for the image. However it seems to make the whole image feathered, instead I only need the very EDGES to be strong feathered, and then become less feathered as it spans approx. 50px towards the center on all sides of the image.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p class="vignette"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>p.vignette {
    position: relative;
  }
  
  p.vignette img {
   display: block;
   width:80%;
  margin-left:auto;
  margin-right:auto;
   margin-top:6%;
  
  }
  
  p.vignette:after {
   -moz-box-shadow: inset 0 0 180px #defeec;
   -webkit-box-shadow: inset 0 0 180px #defeec;
   box-shadow: inset 0 0 180px #defeec;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   content: "";
  }
  </code></pre>
  
  <p>You can see I'm using an inset box shadow of 180px but this makes the whole image feathered slightly, and if I use say 50px it is barely noticeable at all! How do I make just the edges strongly and then fading into weaker towards the center?</p>
  
  <p>Thank you!</p>