SVG drop shadow using css3

Question

Is it possible to set drop shadow for an SVG element using css3, something like

box-shadow: -5px -5px 5px #888;

-webkit-box-shadow: -5px -5px 5px #888;

I saw some remarks on creating shadow using filter effects. Is there an example of using CSS alone. Below is a working code where the cursor style is correctly applied, but no shadow effect. Please help me to get the shadow effect with the least bit of code.

svg .shadow { 

  cursor:crosshair; 

  -moz-box-shadow: -5px -5px 5px #888;

  -webkit-box-shadow: -5px -5px 5px #888;

  box-shadow: -5px -5px 5px #888; 

}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">

    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />

</svg>

Answer 1

Try using the code given below:

<filter id="dropshadow" height="130%">

  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->

  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->

  <feComponentTransfer>

    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->

  </feComponentTransfer>

  <feMerge> 

    <feMergeNode/> <!-- this contains the offset blurred image -->

    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->

  </feMerge>

</filter>

<circle r="10" style="filter:url(#dropshadow)"/>