backdrop-filterで効果をつける

CSSのbackdrop-filterプロパティを使えば、様々な効果をつけることができます。filterプロパティと似ていますが、backdrop-filterの場合は内側の要素に影響することなく、外側の要素だけに効果を適用することができます。例えば、iOSなどで使われているような、すりガラス風のエフェクトをかけることができたりします。

backdrop-filterの使い方

スタイルシートにbackdrop-filterプロパティを1行追加するだけで簡単に効果を与えることができます。

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

このようにした場合、背景にある要素をぼかしてその上にテキストなどの要素を表示させることができます。

それ以外の効果としては以下のような値があります。

blur	ぼかし（pxで指定）
brightness	明るさ（単位なし）
contrast	コントラスト（％で指定）
grayscale	モノトーン（％で指定）
invert	階調反転（％で指定）
hue-rotate	色相（degで指定）
opacity	不透明度（％で指定）
sepia	セピア調（％で指定）
saturate	彩度（％で指定）
drop-shadow	ドロップシャドウ（pxで指定）

以上が、backdrop-filterを使った効果の付け方となります。サポートしているブラウザはほとんどないのが現状ですが、機会があれば試してみてください。