CSSのfilterで影を付けたりぼかしたり

2022.02.07（更新日：2022.02.08）

ちょっとした装飾で、いちいち画像加工ソフトを使うのは面倒！
況してや元画像がアップしてあるのに追加しなければならないなんて無駄この上ない！
なんて時にとっても便利なCSS関数がある。（と言うのをすぐに忘れる・・・）
もっとも使用頻度の高そうなのをまとめる。

この記事は１年以上経過しています。内容的に古い場合があります。

画像をぼかす「filter: blur」

/* CSS */
blur(radius);
/* 例 */
img {　filter: blur( 4px );　}

０が初期値（ぼかしなし）。px以外にも相対値（em、rem）なんかも使える。ieでは使用不可。

/* CSS */
drop-shadow(offset-x offset-y blur-radius color);
/* 例 */
img {　drop-shadow(5px 5px 10px #000);　}

box-shadowと同じ感覚で使用出来る。異なる点は「透過画像」の形に沿った影を作る。これで画像ソフトで影を作る必要もなくなる。

Illustration by いらすとや