CSSだけで影をつけられる「ドロップシャドウ」は大変便利です。
が、リッチデザインの定石ともいえるこの手法は、フラットデザイン全盛の昨今、「影つけると一気に古臭くなるよね～w」などと言われて、あえて使わないのがセオリーとなっていました。

しかし、いかに必要がなかったとはいえ、今日まで使ったことがなかった自分に驚きます。
そして、いざ使おうかなと調べてみると、ボックスシャドウではなく「ドロップシャドウ」に時代が移っていて驚きます。

ドロップシャドウは擬似要素も対象になるらしく、四角にしか影がつかなかったドロップシャドウを凌駕しているのです。
ますます便利。
これは使わない手はない。

filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));

数値は左から、影の水平方向、垂直方向、ぼかしの具合、色（色+透明度）

【参考】CSS でドロップシャドウをつける方法