【CSS】filter: drop-shadow()の基本と使い方｜box-shadowとの違い

CSS で要素に影をつける方法には box-shadow と filter: drop-shadow() の2種類があります。一見すると似ていますが、仕組みや用途には明確な違いがあります。本記事では drop-shadow() の基本的な使い方と、box-shadow との違いを解説します。

drop-shadow()の基本構文
基本的な使用例
box-shadowとの違い
例：透過画像の影
複数の影を重ねる
注意点
まとめ
関連記事

drop-shadow()の基本構文

filter: drop-shadow(offset-x offset-y blur-radius color);

各値の意味は box-shadow とほぼ同じです。

offset-x：横方向のずれ
offset-y：縦方向のずれ
blur-radius：ぼかしの大きさ
color：影の色

基本的な使用例

<img src="icon.png" alt="アイコン" class="icon">

.icon {
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.4));
}

画像の透明部分を考慮して影がつき、アイコンの形に沿った自然なドロップシャドウが表現できます。

box-shadowとの違い

box-shadow と drop-shadow() は似ていますが、以下のような違いがあります。

box-shadow：要素の矩形ボックスに対して影を描画する
drop-shadow()：要素の透過部分を無視し、不透明な部分の輪郭に沿って影を描画する

つまり、透過PNGやSVGアイコンなど「中抜きや透明部分がある要素」に影を正確に付けたいときは drop-shadow() が有効です。

例：透過画像の影

<img src="star.png" alt="星" class="star">

.star {
  width: 100px;
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
}

box-shadow を使うと四角い画像全体に影がつきますが、drop-shadow() なら星形の輪郭に沿った影がつきます。

複数の影を重ねる

複数の drop-shadow() を空白で区切って並べると、影を重ねて表現できます。

.icon {
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3))
          drop-shadow(-2px -2px 3px rgba(0,0,0,0.2));
}

注意点

古いブラウザではサポートが不完全な場合がある（IE非対応、EdgeはChromium版から対応）
filter プロパティを使うため、GPU処理が働きパフォーマンスに影響する可能性がある
要素全体ではなく「描画ピクセル」に基づいて影を作るので、背景透過画像と相性が良い

まとめ

filter: drop-shadow() は画像やSVGなどの透明部分を考慮した影を表現できる便利なプロパティです。一方で、矩形ボックス単位で影をつける box-shadow は、カードやボタンなど通常のボックス要素に最適です。用途によって 「ボックスに影をつけたいなら box-shadow」「輪郭に沿った影をつけたいなら drop-shadow」 と使い分けるのがポイントです。