<div class="shadow"></div>
.shadow {
    background:#ccc;
    height:100px;
    margin:20px auto 0;
    position:relative;
    width:300px;
}
.shadow:before, .shadow:after {
    bottom:2px;
    content:'';
    filter:blur(2px);
        -webkit-filter:blur(2px);
    position:absolute;
    top:2px;
    width:50%;
    z-index:-1;
}
.shadow:before {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* W3C */
    left:2px;
    transform:skew(0, 2deg);
        -moz-transform:skew(0, 2deg);
        -o-transform:skew(0, 2deg);
        -webkit-transform:skew(0, 2deg);
    transform-origin:left center;
        -moz-transform-origin:left center;
        -o-transform-origin:left center;
        -webkit-transform-origin:left center;
}
.shadow:after {
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, right top, left top, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    /* W3C */
    right:2px;
    transform:skew(0, -2deg);
        -moz-transform:skew(0, -2deg);
        -o-transform:skew(0, -2deg);
        -webkit-transform:skew(0, -2deg);
    transform-origin:right center;
        -moz-transform-origin:right center;
        -o-transform-origin:right center;
        -webkit-transform-origin:right center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js