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;
         


        

Answer 1

Use the new CSS filter property.

Supported by webkit browsers, Firefox 34+ and Edge.

You can use this polyfill that will support FF < 34, IE6+.

You would use it like so:

/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
}

This approach differs from the box-shadow effect in that it accounts for opacity and does not apply the drop shadow effect to the box but rather to the corners of the svg element itself.

Please Note: This approach only works when the class is placed on the element alone. You can NOT use this on an inline svg element such as .

Read more about css filters on html5rocks.