cssでPhotoshopのように画像にエフェクトを追加する方法

こんにちは。koyaです。
今回はcssプロパティbackdrop-filterでエフェクトを追加する方法について紹介します。

実装

早速ですが実際のコードがこちらになります。

See the Pen bg-filter by bashalog (@bashalog) on CodePen.

画像はフリー写真素材ぱくたそ さんの物を使用させていただきました。

解説

backdrop-filterにはオプションが10種類あり、ブラー、セピア、グレースケールなどのよく使うエフェクトもあります。

blur	ぼかし効果
brightness	明るさを変更
contrast	コントラストを変更
drop-shadow	ドロップシャドウ効果
grayscale	グレースケール効果
hue-rotate	色相変換効果
invert	階調の反転効果
opacity	不透明度変更
sepia	セピア効果
saturate	彩度の変更

もしぼかし効果を追加する場合は下記の1行を追加するだけです。

.sample {
  backdrop-filter: blur(10px);
}  

以下は一例ですが:hoverでぼかし効果を追加する使い方は便利そうです。

See the Pen vYNYPmJ by bashalog (@bashalog) on CodePen.

現在IE以外のブラウザでは対応しています。
Bootstrap5ではIE11のサポートも切るようなのでそろそろIEを気にせずにコーディング出来るようになるといいですね。