CSSで透過画像に影を付ける

CSSで影を設定する際、画像要素自体に影を付けるのではなく、画像内の実際の透過内容に合わせて影を付ける方法をメモ。

サンプルコード

box-shadowとdrop-shadowの2種類を試してみます。

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

使用する画像は以下になります。

sample.png

.box-shadow {
	box-shadow: 3px 3px 5px blue;
}
.drop-shadow {
	filter: drop-shadow(3px 3px 5px blue);
}

box-shadowの場合は画像要素自体に影を付けますが、drop-shadowの場合は画像内の実際の内容に併せて影を付けました。
画像に影を設定するデモページ