Multiple box shadow at the bottom of an element separated from one another

In my WordPress widget design, below every widget I designed a shadow like the image below:

I achieved that in my responsive design with a background-image, with background-size: cover and applied to the pseudo element :after. I cut the shadow image with intersecting the round white BG. So when positioned below the main element, the shadow matched nice (The Screenshot). But I failed doing CSS for the main element and the pseudo element using z-index, so the image in mobile devices looks so bad. In mobile devices the image stretches and overlaps the main element.

I tried in the main element:

li.widget-container{
   border: 1px solid #ccc;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
   padding: 10px;
   margin-bottom: 20px;
   position: relative;
   z-index: 5;
}

while doing the pseudo element with:

li.widget-container:after{
   content: '';
   display: block;
   background: transparent url('images/widget-bottom-shade.png') no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   width: 100%;
   height: 30px;
   position: absolute;
   left: 0;
   z-index: 1;
}

Then dimension of the widget-bottom-shade.png is 225px × 30px.

• Is there a way I can do z-index onto them.
• Or, alternatively, is there a CSS box-shadow way so that I can do the similar thing even in WordPress’ widget system?

I registered theme’s widget area with:

function theme_widgets_init() {
    register_sidebar( array (
            'name' => 'Left Sidebar',
            'id' => 'left_sidebar',
            'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            'after_widget' => "</li>",
                'before_title' => '<h3 class="widget-title">',
                'after_title' => '</h3>'
    ) );

}

add_action( 'widgets_init', 'theme_widgets_init', 10 );