CSSのbackdrop-filterについて

概要

backdrop-filterは内側の要素に影響することなく、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。

filterプロパティと同じ効果を持ちますが、フィルタ効果は要素の内容ではなく背景にのみ適用されます。

table: backdrop-filter

値 エフェクト 単位

blur ブラー（ぼかし） px

brightness 明るさ %

contrast コントラスト %

grayscale モノトーン %

invert 諧調反転 %

hue-rotate 色相 deg

sepia セピア %

saturate 彩度 %

opacity 透明度 %

drop-shadow ドロップシャドウ px

複数のエフェクトを適用することもできます。

code:css

.element {

backdrop-filter: grayscale(0.5) opacity(0.8);

}

どういう挙動なのかはこのデモサイトが参考になりました。

記事

対応状況

https://gyazo.com/fd9897c5fe9cc8bb7d43d99f9233202c

MDN

わかりやすいサイト

twitterで見た記事