cssでドロップシャドウをかける場合は要素によって使い分けることができます。影のつけ方3種類をまとめました。
かなり昔の話ですが今まで画像で対応していたのにcssで影がつけられるようになったときは感動したのを覚えています（ジェネレーション…）。
box-shadowとfilter:drop-shadowの違い
box-shadowは四角形や丸（角丸含む）の要素に。
filter:drop-shadowはpngやSVGなどの複雑な形の要素に影をつけます。
box-shadowだけ、要素の内側に影をつけることができます。
box-shadow 四角や丸の要素に影をつける
box-shadowの指定方法です。影のぼかしや範囲の拡大・縮小指定、内側に影をつけることもできます。
四角形や丸（角丸含む）の要素に使用でき、複雑な形にはできません。
色はカラーコード、rgbaどちらでも指定できます。
.dummy {
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 範囲px 色 内側指定;
/*右下10px,ぼかし5px（透過0.3）の影*/
box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
/*左上10px,ぼかし5px（透過0.3）の影*/
box-shadow: -10px -10px 5px rgba(0,0,0,0.3);
/*右下10px,ぼかし5px（透過0.3）,範囲を3px小さくした影*/
box-shadow: 10px 10px 5px -3px rgba(0,0,0,0.3);
/*右下10px,ぼかし5px（透過0.3）,内側に適用した影*/
box-shadow: 10px 10px 5px rgba(0,0,0,0.3) inset;
}
向きの指定はプラスだと右＆下。マイナスだと左＆上に移動します。
影を二重にかけられる
box-shadowは影を複数個重ねることができるそうです。より自然な影にしたりデザインすることもできますね。
.dummy {
box-shadow: -10px -10px 5px rgba(174,135,96,0.6),
10px 10px 5px rgba(213,201,189,0.6);
}
filter:drop-shadow 要素の形に沿って影をつける
filter:drop-shadowは要素の形に沿って影をつけることができます。
cssはbox-shadowと同じように指定することができますが、影の拡大・縮小と、内側に影をつけることはできません。
また、filter:drop-shadowとbox-shadowでは同じ指定をしても微妙に影のかかり方が異なります。上の画像、影が微妙に違うのわかるでしょうか？
.dummy {
filter:drop-shadow(左右の向きpx 上下の向きpx ぼかしpx 色);
/*右下10px,ぼかし5px（透過0.3）の影*/
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=135); /*IE用*/
-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.3)); /*Chrome,Safari用*/
filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.3));
}
-webkit-は旧バージョン用に指定した方がよさそうなので入れておきます。
残念ながらIEは非対応ですが、IE5.5以降で使用できる独自拡張のfilterがあるようです。（いまいちこいつが何者なのかわかっていませんが）
後半の「Color=カラーコード, Strength=影の強さ, Direction=影の向き（光の方向を0〜360°）」を指定します。
最新の対応状況はCan I Useで確認できます。（ちなみに2020年9月時点のカバー率は91.93%）
text-shadow 文字に影をつける
text-shadowは文字通りテキストに影をつけます。
cssの書き方は前述のbox-shadowと似ていて、影の向きとぼかし、色の指定ができます。影の範囲や内側の影指定はできません。
.dummy {
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;
/*右下10px,ぼかし5px（透過0.3）の影*/
text-shadow: 5px 10px 5px rgba(0,0,0,0.3);
/*左上10px,ぼかし5px（透過0.3）の影*/
text-shadow: -5px -10px 5px rgba(0,0,0,0.3);
}
text-shadowも影を重ねることができます。容量が軽くなるので、画像にしなくてすむのはうれしいですね。
.dummy {
text-shadow: -7px -7px rgba(174,135,96,0.7),
7px 7px rgba(213,201,189,0.7);
}
いつも指定の仕方を忘れてしまうのでまとめてみました。
今回は記事内に入れませんでしたが、ブレンドモードで乗算や焼き込みなどができるようなので（知らなかった）ぜひ試してみたいです。cssでデザインの幅が広がるのはいいことですね。
