【解決】png透過画像に影（box-shadow）をつける方法【CSS】

2023年5月29日

記事内に広告を含みます

パソ君

・png透過画像に影をつける方法は？

こんな疑問にお答えします。

デザインによっては、透過画像に影がついてる場合がありますよね。

影ごと画像で書きだして反映するのも良いですが、実はCSSで反映できちゃいます。

それも簡単に。

ジト

すぐにできるよ！

ということで、この記事では「png透過画像に影（box-shadow）をつける方法」について解説していきます！

この記事でわかること

png透過画像に影（box-shadow）をつける方法

サンプルがこちら↓

左側が通常の画像全体に影がかかっている状態。

右側が透過した画像の縁に対して影がかかってる状態です。

影を反映するコードがこちら↓

// 左（画像全体に影）
box-shadow: 15px 15px 10px 0 rgba(255, 0, 0, 0.5);

// 右（画像自体の縁に影）
filter: drop-shadow(15px 15px 10px rgba(255, 0, 0, 0.5));

結論を言うと「filter」を使って、「drop-shadow」を指定すればOKです。

filter: drop-shadow(水平位置 垂直位置 ぼかし 色);

これでpng画像の透過に対して、影をつけることができます。

ジト

ちなみにSVG画像でも実装できます！

【解決】png透過画像に影（box-shadow）をつける方法【CSS】：まとめ

ジト

透過画像に影をつけたい場合は試してみてね！