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 cusor style is correctly applied, but no shadow effect. Please help me to get the shadow effect with least bit of code.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    svg .shadow { 
      cursor:crosshair; 
      -moz-box-shadow: -5px -5px 5px #888;
      -webkit-box-shadow: -5px -5px 5px #888;
      box-shadow: -5px -5px 5px #888; 
    }	

&lt;!-- language: lang-html --&gt;

    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; baseProfile=&quot;full&quot;  viewBox=&quot;0 0 120 70&quot;&gt;	
        &lt;rect class=&quot;shadow&quot; x=&quot;10&quot; y=&quot;10&quot; width=&quot;100&quot; height=&quot;50&quot; fill=&quot;#c66&quot; /&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;



SVG drop shadow using css3

The SVG I&#39;m working with has a drop shadow via `feGaussianBlur` filter.

The shadow itself is displayed properly, but gets cut off on top and bottom edges.

Like so:

![image of cutoff shadow][1]

The SVG in question is:

    &lt;?xml version=&quot;1.0&quot; standalone=&quot;no&quot; ?&gt;
    &lt;!DOCTYPE svg
      PUBLIC &#39;-//W3C//DTD SVG 1.1//EN&#39;
      &#39;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&#39;&gt;
    &lt;svg height=&quot;600&quot; version=&quot;1.1&quot; width=&quot;700&quot; xml:space=&quot;preserve&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
      &lt;defs/&gt;
      &lt;filter id=&quot;SVGID_0&quot;&gt;
        &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;6.6&quot;/&gt;
        &lt;feOffset dx=&quot;0&quot; dy=&quot;0&quot;/&gt;
        &lt;feMerge&gt;
          &lt;feMergeNode/&gt;
          &lt;feMergeNode in=&quot;SourceGraphic&quot;/&gt;
        &lt;/feMerge&gt;
      &lt;/filter&gt;
      &lt;path d=&quot;M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122&quot; stroke-linecap=&quot;round&quot; style=&quot;stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);&quot; transform=&quot;translate(50 50)&quot; /&gt;
    &lt;/svg&gt;

The cropping seems to happen consistently in Chrome (30), Firefox (25), and Opera (12).

I can see that it&#39;s not a viewbox limitation, as it&#39;s set to 600x700.

I can also see in devtools inspector the bounding box of `&lt;path&gt;` element, and it&#39;s almost as if that&#39;s what cuts off the shadow:

![path bounding box][2]

If that&#39;s the case:

  1. Why is the shadow only cut off vertically and not horizontally?
  2. How to work around it, so that it&#39;s not clipped like this?

If it&#39;s not the bounding box, what causes this and how to avoid this clipping?


  [1]: http://i.stack.imgur.com/hE52X.png
  [2]: http://i.stack.imgur.com/UnvzK.png

All Svg Filters Solutions on Gang of Coders

Total of 2 Svg Filters Solutions

SVG drop shadow using css3

SVG shadow cut off