<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
px;
px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
%;
max-px; /* avoid rotation causing ugly appearance at large container widths */
max-px;
%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
TIP: If you are using a parent element. Make sure that the parent div has position: relative; z-index: 99; or those shadows wonβt show up.
Update 10/2/12: max-height added for long boxes to prevent shadow display issue thanks to Pete Rugh rughsterdesign.com
Update 5/5/11: Code update which gives this effect more robustness thanks to Nicolas Gallagher: @necolas nicolasgallagher.com/css-drop-shadows-without-images/
Update 9/12/10: Slightly amended the code thanks to some tweaks by Cameron Moll: drbl.in/GCt
Also removed the -ms filters to avoid confusion and please @Malarkey
Handcoded in Coda on a Macbook Pro with love by Matt Hamm matthamm.com / supereightstudio.com
thanks to ballyhooblog.com for the inspiration.