• CSS

CSSでPNG画像に影を落とす方法【filterプロパティdrop-shadow】

投稿日:2025年01月15日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

CSSでドロップシャドウをつけるには？

CSSで要素に影（ドロップシャドウ）を付ける手段としては「box-shadow」や「text-shadow（テキストの場合）」が有名ですが、filterプロパティのdrop-shadow()関数でもドロップシャドウを設定できます。

drop-shadowの特徴は下図のようにPNG画像などの透明部分にも影をつけることができるという点です。

box-shadowやtext-shadowプロパティとの違い

要素に影をつけるための3つのプロパティですが、効果や機能に微妙な違いがあるので、状況に応じた使い分けが必要になります。

以下にそれぞれのプロパティの特徴をまとめてみました。

box-shadow

まず、box-shadowプロパティは要素の境界に沿って影を落とすので、透過部分を持つPNG画像でも影の形は四角形になります。

<img src="sample1.png" class="box-shadow">

.box-shadow{
    box-shadow: 10px 10px 3px 3px #666;
}

また、影が付く対象はbox-shadowを設定した要素にのみであり、子要素を含んでいてもそちらには影は付きません。

<div class="myBox box-shadow"><img src="sample1.png"><p>box-shadow</p></div>

.mybox{
    padding: 10px;
    border:solid 3px #144da0;
}
.box-shadow{
    box-shadow: 10px 10px 3px 3px #666;
}

text-shadow

続いて、text-shadowはテキストに影を落とすためのプロパティですのでテキスト以外に設定しても何も変わりません。親要素に設定した場合は子要素のうちテキストにのみ影を落とします（親要素に背景が設定されていてもテキストの影は見えます）。

<div class="myBox text-shadow"><img src="sample1.png"><p>text-shadow</p></div>

.mybox{
    padding: 10px;
    border:solid 3px #144da0;
}
.text-shadow{
    text-shadow: 0 0 5px #000;
}

filter:drop-shadow

最後にfilterプロパティのdrop-shadowは要素の形状に沿って影を落とすことができるので、PNGのように透明部分を含んでいても形状に沿って影を付けることができます。

また、テキストに対しても影を落とすことができ、子要素を持つ場合はその子要素にも影がつきます（要素に背景が設定されていると子要素の影は見えません）。

<div class="myBox drop-shadow"><img src="sample1.png"><p>drop-shadow</p></div>

.mybox{
    padding: 10px;
    border:solid 3px #144da0;
}
.drop-shadow{
    filter:drop-shadow(0 0 5px #000);
}

要素にborderを設定している場合はborderに対しても影が付きます。

一方でdrop-shadowでは要素の内側に影を落とす「inset」が使えなかったり、影の「広がり」を指定できないという制限もあります。

3つのプロパティの違いを表にまとめると以下の通りです。

	filter:drop-shadow	box-shadow	text-shadow
PNG画像
テキスト	〇	×	〇
子要素への影響	〇	×	×
内側に影を落とす（inset）	×	〇	×
影の広がりの指定	×	〇	×

filterプロパティとは？

CSSのfilterプロパティは、画像や要素に様々な視覚効果を加えることができるプロパティです。

ドロップシャドウ以外にも、セピア化や、色調変更、明るさの調整など、画像編集ソフトで加工するような処理をCSSだけで簡単に実装できるのが特徴です。

filterプロパティならびに他の関数についてはこちらのページにまとめています。

filter:drop-shadowの使い方

filterプロパティのdrop-shadow()関数は以下のように記述して使います。

第一引数では水平方向（左右）の位置を設定します。右に移動させたい場合は正の数、左に移動したい場合は負の数を使って移動させます。

第二引数では垂直方向（上下）の位置を設定します。下に移動させたい場合は正の数、上に移動したい場合は負の数を使って移動させます。

第三引数では影のぼかし半径を設定します。数値を大きくするほど、影は薄く広範囲に広がります。

下の例では要素に対して、「右に3px」「下に3px」の位置に「ぼかし3px」「色は黒（#000000）」の影を設定しました。

<img src="https://web.skipjack.tokyo/wp-content/uploads/css/filter-drop-shadow/sample1.png" class="myFilter drop-shadow1">

img.myFilter.drop-shadow1{
    filter: drop-shadow(3px 3px 3px #000000);
}

プレビュー

ドロップシャドウを解除したい場合は「drop-shadow(none)」を指定します。

数値による表示結果の違い

下記はドロップシャドウの表示を簡易的に確認するシミュレーターです。

入力した「水平方向」「垂直方向」「ぼかし量」「影の色」が画像に反映されます。

filter:drop-shadow（px px px ）;

アニメーションで影をつける

filterプロパティの利点のひとつとして、transitionやanimationプロパティと組み合わせることで効果をアニメーションで見せることができるという点が挙げられます。

下図のような写真に対して徐々に影をつけるようなアニメーションは、CSSだけであっという間に実装できます。

今回作成したコードは以下の通りです。

img.myFilter.drop-shadow-anime{
    animation: drop-shadowAnime 5s infinite;
}
img.myFilter.drop-shadow-anime{
    max-width:400px;
    margin: 0 auto;
    animation: drop-shadowAnime 2.5s infinite;
}
@keyframes drop-shadowAnime{
    0%{
        filter:drop-shadow(none);
    }
    50%{
        filter: drop-shadow(0 0 5px #333);
    }
    100%{
        filter: drop-shadow(none);
    }
}

2行目animationプロパティを使ってアニメーションを設定します。（今回は例としてアニメーションがわかりやすいようにinfiniteを指定してアニメーションが繰り返されるようにしています）

4行目@keyframesでアニメーションの動きを設定します。

5行目~影を付けたり消したりを繰り返すように指定しました。

animationプロパティの使い方について詳しくはこちらのページにまとめています。

まとめ

以上が、filterプロパティのdrop-shadow()関数を使ってCSSだけで写真に影を落とす方法です。

PNG画像の透過部分にドロップシャドウを付けられるという点は大きなポイントですので是非活用してみてください。