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

You can easily add a drop-shadow effect to an svg-element using the drop-shadow() CSS function and rgba color values. By using rgba color values you can change the opacity of your shadow.

img.light-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

img.dark-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}