Criando sombras diferentes com CSS3

Veja abaixo como criar um efeito de sombra diferenciando, utilizando CSS3:

HTML:

<div class="box effect1">

    <h3>Effect 1</h3>

</div>

CSS:

.box h3{

    text-align:center;

    position:relative;

    top:80px;

}

.box {

    width:70%;

    height:200px;

    background:#FFF;

    margin:40px auto;

}

/*==================================================

 * Effect 2

 * ===============================================*/

.effect2

{

  position: relative;

}

.effect2:before, .effect2:after

{

  z-index: -1;

  position: absolute;

  content: "";

  bottom: 15px;

  left: 10px;

  width: 50%;

  top: 80%;

  max-width:300px;

  background: #777;

  -webkit-box-shadow: 0 15px 10px #777;

  -moz-box-shadow: 0 15px 10px #777;

  box-shadow: 0 15px 10px #777;

  -webkit-transform: rotate(-3deg);

  -moz-transform: rotate(-3deg);

  -o-transform: rotate(-3deg);

  -ms-transform: rotate(-3deg);

  transform: rotate(-3deg);

}

.effect2:after

{

  -webkit-transform: rotate(3deg);

  -moz-transform: rotate(3deg);

  -o-transform: rotate(3deg);

  -ms-transform: rotate(3deg);

  transform: rotate(3deg);

  right: 10px;

  left: auto;

}

Fonte: http://www.paulund.co.uk/