Edit in JSFiddle

<div class="box">
    <h1>C# Code (CSharpCode.org)</h1>
</div>

body {
    background:#E6E6E6;
    text-align:center;
}
.box {
    position: relative;
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
.box:before, .box:after {
    z-index: -1; /* send this element backward */
    position: absolute; /* absolute positioning referring to effect2 */
    content: ""; /* just required, no need to put anything inside */
    bottom: 15px; /* bottom shadow alignment, less is closer to bottom */
    left: 10px; /* consider this like a margin left */
    width: 50%; /* width of the shadow element background */
    top: 80%; /* consider this as margin top of the shadow  - element */
    max-width:300px; /* restricts the max width of the shadow element */
    background: #777; /* gives a background color to the shadow element */
    -webkit-box-shadow: 0 15px 10px #777; /* compatibility case application */
    -moz-box-shadow: 0 15px 10px #777; /* compatibility case application */
    box-shadow: 0 15px 10px #777; /* applied the basic box-shadow property */
    
    /* rotation of shadows/elements gives that 3D look to the box */
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.box:after {
    -webkit-transform: rotate(3deg); /* aligns the shadow right */
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px; /* consider this like a margin right */
    left: auto; /* leave this auto to automatically set the  - left */
}