drop-shadow

by SamHasler

HTML

<svg id="svg" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
    <filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.42)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
    </filter>
</defs>
    <image filter="url(#dropshadow)" x="100" y="100"
    width="100" height="100" xlink:href="http://www.designerbyfate.com/up/pics/circle.png"/>
</svg>

<img class="shadowed" src="http://www.designerbyfate.com/up/pics/circle.png" />

CSS

.shadowed {
-webkit-filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.42));
        filter: url(#svg#dropshadow);
}
.ie-shadowed {
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=4, Color='#000')";
        filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=4, Color='#000')";
}