Possible to have a fully transparent inset box-shadow?

Question

Is it possible to have the two divs with box-shadow overlap with fully transparent edges? In my example, I want to keep the faded, kind of rounded edge, but it's important that the underlying box is visible through the fade. But as you can see the faded edge is not entirely transparent so it will show a white border rather than let the blue color shine through..

Is it possible to make this work without resorting to png or similar?

Example

.bg {
    background-image: -moz-linear-gradient(right top , rgba(255, 255, 255, 0) 0%, #FF0000 100%);
    box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    -webkit-box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    -moz-box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    opacity: 0.7;
    position: absolute;
}

Answer 1

I don't know whether this is possible with inset box-shadow; however you can make them overlap seamlessly with outset box-shadow for the overlapping element.

All you have to do is give the overlapping element a box-shadow color that is the same as its background-color.

I have edited your sample here: (I didn't copy all the vendor-specific prefixes, just used box-shadow).

http://jsbin.com/orajot/4/edit