背景にガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」

背景にガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」

これまでのfilterプロパティでは要素全体、子要素までフィルターの処理がかかっていましたが、backdrop-filterでは背景のみにfilter処理ができます。backdrop-filterの異なる値でそれぞれの処理がどのようになるかを画像サンプルで紹介しています。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

backdrop-filter

backdrop-filterの値には以下の種類が用意されています。

サンプルコード

実際に同じ条件で各値のbackdrop-filterを設定したサンプルコードです。サンプルコードの後の表示結果を確認してください。
デフォルトとして、透明度50%の白背景を設定しています。

ブラウザ上で表示した結果

backdrop-filter: none

backdrop-filter: blur(3px)

backdrop-filter: brightness(150%);

backdrop-filter: contrast(200%);

backdrop-filter: drop-shadow(4px 4px 10px blue);

backdrop-filter: grayscale(100%);

backdrop-filter: hue-rotate(120deg);

backdrop-filter: invert(70%);

backdrop-filter: opacity(50%);

backdrop-filter: sepia(90%);

backdrop-filter: saturate(3);