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

backdrop-filterの使い方

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

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

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

backdrop-filterを使った効果の付け方

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

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

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

その他の記事