Svg drop shadow using css3

Looking back for support

To ensure your lovely shadows display properly in legacy browsers such as older versions of Safari, include -webkit-filter to buff up the compatibility:

svg {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7)); /* Affectionately casting shadows */
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7)); /* CSI: Safari */
}


Better with SVG filters

For those finding the CSS kingdom a bit cramped, SVG itself has a whole realm of filters to offer:

<svg>
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
    <feOffset dx="2" dy="2" result="offsetblur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5"/>
    </feComponentTransfer>
    <feMerge> 
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <g filter="url(#dropshadow)">
    <!-- Your SVG content here -->
  </g>
</svg>


This example demonstrates an SVG filter for creating a drop shadow, with feGaussianBlur, feOffset, and feComponentTransfer used together to generate a deeply customized shadow.

Shading SVG text

SVG <text> elements can don a shadow using the text-shadow CSS property just like regular text elements:

text {
  text-shadow: 2px 2px rgba(0,0,0,0.3); /* Text shadow, now available on SVG! */
}


How's that for legibility?

Customized opacity with RGBA

A higher level of shadow customization is achievable by tweaking the alpha value in your RGBA color definition:

svg {
  filter: drop-shadow(4px 4px 6px rgba(100, 100, 100, 0.5)); /* 50% opacity shadow, for when your SVG plays hard to get */
}


Advanced SVG filtering

Looking to turn up your SVG shadows to 11? Use feDropShadow in your SVG filters:

<filter id="deepshadow" height="130%">
  <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#3d3d3d" flood-opacity="0.5"/>
</filter>


The SVG equivalent of CSS box-shadow, feDropShadow lets you style your SVG shadows with utmost flair.

Universal Shadow Pact (AKA compatibility)

Like a universal treaty, ensure your shadows are compatible across all browsers and if you find one breaking the pact, use a polyfill like CSS-Filters-Polyfill.