CSS「backdrop-filter」を使用して背景にぼかし効果をつける

背景画像のぼかし処理や、モーダルウィンドウの背景などを実装する際に、画像処理や、透過画像等で対応していた部分をCSSのみで解決できる方法があったのでメモ。

CSS

.bg__image {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

ぼかし以外にも色変化のようなグラフィック効果を適用することもできます。
指定した要素の背後にあるすべてに適用されます。

関数名	効果	値
blur	ぼかし	0px 〜 10px
brightness	明るさ	0%～
contrast	コントラスト	0%～
drop-shadow	影
grayscale	モノクロ	0% ～ 100%
hue-rotate	色相回転	0deg ～ 360deg
invert	階調	0% ～ 100%
opacity	透過	0%～
sepia	セピア	0% ～ 100%
saturate	彩度	0%～

• backdrop-filterの使い方解説！CSSでグラスモーフィズムを実装！