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