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);