css の drop-shadow で透過画像に沿った影をつける方法（IE は非対応）

透過 PNG など、画像の形状に合わせて自然な影を付けたい場合は、filter: drop-shadow() を使用する方法が便利です。

box-shadow だと画像の四角形に影がついてしまう

box-shadow は要素のボックス（四角形）に対して影を生成するため、透過部分も含めて四角い影になってしまいます。

See the Pen [CSS] box-shadow by mkl may (@mkl-may) on CodePen.

filter: drop-shadow() なら画像の輪郭に沿った影を付けられる

filter: drop-shadow() を使うと、画像の不透明部分に沿って影が生成されるため、自然なシルエットの影を付けられます。

See the Pen [CSS] filter: drop-shadow() by mkl may (@mkl-may) on CodePen.

filter: drop-shadow() の指定方法

drop-shadow(X方向の距離 Y方向の距離 ぼかし量 色)
の形式で指定します。色はカラーコード・RGB・RGBA などで指定できます。

注意：IE は非対応

Internet Explorerは filter: drop-shadow() に対応していません。
IE でも影を付けたい場合は、画像作成時に影を含めて作成する必要があります。