3D effect with CSS box-shadow Property Example

Updated on August 13, 2015     Kisan Patel

This example will show you how shadows are styled as elements to give impressive look using css box-shadow property.

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

<!-- Style -->
<style type="text/css">
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 */
}
</style>