Blog Post

filter: drop-shadow() vs box-shadow

While you’ve likely heard of box-shadow you may not have heard about the drop-shadow filter. box-shadow does a very nice shadow, but it’s always a box.

box-shadow: 1px 1px 10px #000; 

On the other hand the filter: drop-shadow() will do an exact drop shadow of the element so if you’ve rounded corners or have an SVG with some transparency or whatever drop-shadow() will give you a drop shadow of your exact element and, when available, you’ll get hardware acceleration to boot.

filter: drop-shadow( 1px 1px 10px #000);