[css] Soft Edges using CSS?

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.

Here is my CSS for the box:

#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;
}

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.

Also I would prefer if at all possible for this to work in all browsers.

Thanks for the help. =>

You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one

Like that: CSS3 Transparency + Gradient

Gradient should be more transparent on top or on top right corner (depending on capabilities)

It depends on what type of fading you are looking for.

But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.

http://jsfiddle.net/tLu7u/

also.. http://css3pie.com/