backdrop-filter

backdrop-filterは要素の背景に、ガラスの様なぼかしを入れたり、背景画像の色を変化させることができるフィルターです。
変化する部分は画像全体だけでなく、一部だけでも変化させることができるのでデザインの幅が広がるCSSプロパティです。

値

backdrop-filterの初期値はnoneです。
フィルターは以下のような効果のフィルターがあります。

ぼかしblur();
明るさbrightness();
コントラストcontrast();
グレースケールgrayscale();
色相反転hue-rotate();
階調反転invert();
セピアsepia();
彩度saturate();

サンプル画像

今回は以下のサンプル画像を用いてbackdrop-filterの効果を見ていきます。

ぼかし blur();

明るさ brightness();

コントラスト contrast();

グレースケール grayscale();

色相反転 hue-rotate();

階調反転 invert();

セピア sepia();

彩度 saturate();

backdrop-filterを使えば色々な表現をすることができるので幅広いサイトに応用できます。
サイトのイメージに合ったフィルターを使用することでよりデザイン性の高いサイトになるので使っていきたいCSSのひとつです。