「filter: drop-shadowって、box-shadowと何が違うの？」と迷ってしまうことはありませんか。
どちらもCSSで影を付けるための指定ですが、影が付く対象や使える値にははっきりした違いがあります。
特に、透過PNGやSVGのような素材では、box-shadowだと思ったような見た目にならず、困ってしまう方も少なくありません。
そんなときに知っておきたいのが、filter: drop-shadowの正しい使い方です。
この記事では、filter: drop-shadowの基本的な書き方から、box-shadowとの違い、使い分けのコツ、注意点までをやさしく整理して解説します。
初心者の方でも読み進めやすいように、実例ベースでわかりやすくまとめました。
「結局どっちを使えばいいのか」がすっきりわかる内容になっているので、ぜひ最後までチェックしてみてください。
この記事でわかること
- filter: drop-shadowの基本的な書き方
- box-shadowとの違いと使い分け
- drop-shadowでできることとできないこと
- 透過画像やアイコンに自然な影を付けるコツ
filter: drop-shadowとは何か
CSSで影を付けたいとき、まず思い浮かぶのはbox-shadowかもしれません。
ただし、画像やアイコンのように四角形ではない要素へ自然な影を付けたい場面では、filter: drop-shadowがとても便利です。
この指定を使うと、要素の見た目に合わせて影が付くため、透過PNGやSVGのような素材でも違和感の少ない表現がしやすくなります。
特にロゴやアイコン、切り抜き画像のように、背景が透明なパーツをきれいに見せたいときに役立ちます。
一見するとbox-shadowと似ていますが、考え方は少し違います。
そのため、見た目だけで判断してしまうと、思った位置に影が出ない、または四角く影が付いてしまうことがあります。
box-shadowとの違い
大きな違いは、どこに対して影を付けるかです。
box-shadowは要素のボックス全体に対して影を付けるため、画像そのものが丸くても星形でも、基本的にはボックス基準で影が付きます。
一方でfilter: drop-shadowは、表示されている形に沿って影が出やすいため、透過部分を含む画像と相性が良いです。
この違いを理解しておくと、なぜ同じ「影」でも仕上がりが変わるのかがすぐにわかります。
どんな場面で使うと便利か
たとえば、次のようなケースではfilter: drop-shadowが向いています。
- 透過PNGに自然な影を付けたいとき
- SVGアイコンやロゴを少し浮かせて見せたいとき
- 背景が複雑でも、画像の輪郭に沿って影を出したいとき
逆に、カードUIやボタン、ボックス要素のように四角形ベースのデザインなら、box-shadowのほうが扱いやすいことも多いです。
つまり大切なのは、どちらが上かではなく、どちらが目的に合っているかで選ぶことです。
filter: drop-shadowとは何か
CSSで影を付けたいとき、まず思い浮かぶのはbox-shadowかもしれません。
ただし、画像やアイコンのように四角形ではない要素へ自然な影を付けたい場面では、filter: drop-shadowがとても便利です。
この指定を使うと、要素の見た目に合わせて影が付くため、透過PNGやSVGのような素材でも違和感の少ない表現がしやすくなります。
特にロゴやアイコン、切り抜き画像のように、背景が透明なパーツをきれいに見せたいときに役立ちます。
一見するとbox-shadowと似ていますが、考え方は少し違います。
そのため、見た目だけで判断してしまうと、思った位置に影が出ない、または四角く影が付いてしまうことがあります。
box-shadowとの違い
大きな違いは、どこに対して影を付けるかです。
box-shadowは要素のボックス全体に対して影を付けるため、画像そのものが丸くても星形でも、基本的にはボックス基準で影が付きます。
一方でfilter: drop-shadowは、表示されている形に沿って影が出やすいため、透過部分を含む画像と相性が良いです。
この違いを理解しておくと、なぜ同じ「影」でも仕上がりが変わるのかがすぐにわかります。
どんな場面で使うと便利か
たとえば、次のようなケースではfilter: drop-shadowが向いています。
- 透過PNGに自然な影を付けたいとき
- SVGアイコンやロゴを少し浮かせて見せたいとき
- 背景が複雑でも、画像の輪郭に沿って影を出したいとき
逆に、カードUIやボタン、ボックス要素のように四角形ベースのデザインなら、box-shadowのほうが扱いやすいことも多いです。
つまり大切なのは、どちらが上かではなく、どちらが目的に合っているかで選ぶことです。
box-shadowとの違いを比較して理解しよう
ここは初心者の方がもっとも迷いやすい部分です。
似た効果に見えても、向いている用途ははっきり分かれます。
影が付く対象の違い
box-shadowは、要素の外枠を基準に影を付けます。
そのため、画像が丸型や透過素材でも、要素のボックスに沿った影になりやすいです。
一方でfilter: drop-shadowは、見えている形に沿って影が出るので、切り抜き画像との相性が良くなります。
ロゴや人物の透過画像では、この違いが見た目にかなり出ます。
指定できる値の違い
box-shadowでは、位置、ぼかし、広がり、色、さらに内側に影を入れる指定まで扱えます。
それに対してfilter: drop-shadowでは、広がりや内側指定は使えません。
つまり、繊細に「広げる」「内側に入れる」といった調整をしたいなら、box-shadowのほうが向いています。
逆に、輪郭に沿った自然な影を優先したいならdrop-shadowが便利です。
迷ったときの使い分け
判断に迷ったときは、次のように考えるとわかりやすいです。
| 使いたい対象 | 向いている指定 |
|---|---|
| カード、ボタン、見出しボックス | box-shadow |
| 透過PNG、SVG、ロゴ、アイコン | filter: drop-shadow |
四角いUIはbox-shadow、形に沿わせたい素材はdrop-shadowと覚えると実務でも迷いにくくなります。
filter: drop-shadowを使うときの注意点
便利な指定ですが、何となく使うとつまずきやすい部分もあります。
特に、box-shadowと同じ感覚で書いてしまうと違和感が出やすいです。
spreadとinsetは使えない
drop-shadowでは、box-shadowで使える広がりの指定やinsetの指定は使えません。
そのため、影を大きく太らせたい、あるいは内側に影を入れたいといった表現には向きません。
この点を知らないまま書くと、思ったデザインを再現できない原因になります。
必要な表現がspreadやinset前提なら、最初からbox-shadowを選ぶほうがスムーズです。
filterはほかの効果と順番の影響を受ける
filterプロパティは、drop-shadowだけの専用領域ではありません。
blurやbrightnessなど、ほかのフィルターと一緒に書ける反面、並び順によって見た目が変わることがあります。
たとえば色味を変えるフィルターと影を同時に使うと、順番しだいで印象がかなり変わることもあります。
そのため、複数のfilterを使うときは、見た目をブラウザ上で必ず確認しましょう。
デザイン確認で見落としやすいポイント
drop-shadowは自然に見せやすい反面、背景色によっては影がほとんど見えないこともあります。
白背景ではきれいでも、写真背景や濃い背景に重ねると急に目立ちすぎることもあります。
また、影を強くしすぎると、少し古いデザインに見えやすいので注意が必要です。
最近のUIでは、小さめのずれと控えめな透明度で品よく見せるほうがなじみやすいです。
よくある使用例をコード付きで紹介
ここからは、実際に使いやすい例を見ながらイメージを固めていきましょう。
用途がわかると、box-shadowとの使い分けもぐっと簡単になります。
PNGやSVGの透過画像に影を付ける
もっとも定番なのが、透過画像への影です。
.logo{
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}この指定なら、画像の四角い枠ではなく、見えている形に沿って影が付きやすくなります。
ロゴ画像や人物の切り抜き、装飾イラストなどで活躍します。
アイコンやロゴに自然な影を付ける
アイコンの視認性を少し上げたいときにも便利です。
.icon{
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}数値を控えめにすると、わざとらしさの少ない上品な影になります。
UIで多用する場合は、強い影よりもさりげない補助として使うほうが失敗しにくいです。
複数のdrop-shadowを重ねる
少し凝った見せ方をしたいときは、影を重ねる方法もあります。
.badge{
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18))
drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}こうすると、近い影と遠い影を組み合わせたような立体感が出しやすくなります。
ただし、重ねすぎると重たい印象になりやすいため、まずは2段階くらいまでに抑えるのがおすすめです。
自然さを残しながら少しだけ奥行きを足すイメージで調整すると、ぐっと洗練されます。
まとめ
この記事のポイントをまとめます。
- filter: drop-shadowは、要素の見た目の形に沿って影を付けやすい指定です。
- box-shadowは、要素のボックス全体に対して影を付けるプロパティです。
- 透過PNGやSVG、ロゴ、アイコンではdrop-shadowが活躍しやすいです。
- カードやボタンなど四角いUIにはbox-shadowのほうが扱いやすいです。
- drop-shadowはfilterプロパティの中に関数として書きます。
- 指定する基本要素は、x方向、y方向、ぼかし、色です。
- drop-shadowでは広がり指定やinsetは使えません。
- ほかのfilterと組み合わせるときは、順番で見た目が変わることがあります。
- 影を強くしすぎると古い印象になりやすいため、控えめな調整が大切です。
- 迷ったときは、四角いUIはbox-shadow、形に沿わせたい素材はdrop-shadowで考えるとわかりやすいです。
filter: drop-shadowは、一見するとbox-shadowの代わりのように見えますが、実際には得意な場面が異なります。
だからこそ、何となく選ぶのではなく、どの要素に、どんな見せ方をしたいのかを先に考えることが大切です。
基本の書き方と違いさえ押さえておけば、ロゴやアイコン、透過画像の見せ方がぐっと整いやすくなります。
まずは小さなパーツで試しながら、box-shadowとの使い分けを少しずつ体感していきましょう。
