I was working on a little animation of my logo - the can and cloud. On hover, a parade of clouds slide in front of a can - really just the same cloud in a marquee style animation that uses a translateX().

Since it was floating in front of the can, it would be nice to have a little shadow to complete the illusion.

But you can't put a box-shadow on a SVG path.

I was sad, because I thought I was going to have to use some crazy verbose thing inside SVG. I always prefer to control things with CSS and to keep markup semantic and sparse as possible. CSS is for presentation! I didn't wanna have to add this obscenity to the nice and tiny SVG code.

For the love of God, don't make me code this!

<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)"/>

Always read the second answer on Stack Overflow

Thank goodness I know how to scroll, and hence discover the dear, dear CSS drop-shadow function. It is actually a value of the CSS filter property, which has been widely supported for five years.

Here is how you use it. Works just like box-shadow, except it does not support the spread value - only blur.

filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));