title: Soft Edges using CSS?
body: <p>I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge. </p>
  
  <p>Here is my CSS for the box: </p>
  
  <pre><code>#past{
      position:absolute;
      left:0;
      top:363px;
      background-color: rgba(34,34,34,0.6);
      /* For IE 5.5 - 7*/
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
      /* For IE 8*/
      -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
      z-index:10;
      padding:10px;
  }
  </code></pre>
  
  <p>I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image. </p>
  
  <p>Also I would prefer if at all possible for this to work in all browsers. </p>
  
  <p>Thanks for the help. => </p>