CSS3 Drop Shadows para ícones

Usando alguns gradientes radiais CSS é bastante fácil criar uma sombra projetada para ícones, imagens, etc.

Shadow Image

JSBin http://jsbin.com/ohusor/2/

<body>
<div>
<a href="">
<span class="shadow">&nbsp;</span>
<img src="https://store.cerner.com/items/123/icon">
<span>link text</span>
</a>
</div>
</body>
</html>

.shadow {

position: absolute;

height: 7px;

width: 60px;

top: 80px;

left: 10px;

/*box-shadow: 1px 40px 40px -15px lightgray;*/

background-image: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);

background-image: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);

background-image: -o-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);

background-image: -ms-radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%);

background-image: radial-gradient(50% 50%, ellipse closest-corner, rgba(171, 171, 171, 0.7), rgba(255, 254, 250, 0.7) 74%)

}


img {

position: absolute;

left: 10px;

height: 60px;


}


span {

position: absolute;

top: 25px;

left: 75px

}