[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説

Post on:2020年6月8日

「backdrop-filter」だと、一行のコードで実装できる

私はbackdrop-filterというプロパティがあるのを初めて知りました。さっそく試してみたところ、このプロパティが魔法以外の何物でもないことを確信しました。
backdrop-filterプロパティは、内部のテキストやその他の要素を変更することなく、要素の背景の色相やコントラストやぼかしを変更することができます。

iOSの通知スタイルを真似たデモを見てみてください。
パネルの背景が美しくぼかされているのが分かると思います。

デモページ（メリル・ロイ・ナオミからのメッセージ！）

この背景の効果は、たった一行のCSSで実装できます。

.notification {
  backdrop-filter: blur(3px);
}

.notification {

backdrop-filter: blur(3px);

}

ただし、一つ注意点があります。それはサポートブラウザが充分でないことです（サポートブラウザを参照）。

しかし、今まではこのような効果を与えるには、非常に長いコードとCSSハックが必要でした。
参考: Frosting glass CSS Filters

backdrop-filterプロパティを使用すると、はるかに少ないコードで実装できます。

ガラス効果のさまざまなスタイル

backdrop-filterで実装できるガラス効果には、さまざまなスタイルが用意されています。下記のデモではbackdrop-filterの値を変更して、さまざまなスタイルを実装しています。

デモページ

それぞれのボックスはdiv要素で、backdrop-filterの異なる値を適用しています。値は、各ボックスの上部に記述されているコードのみで、非常にシンプルです。

backdrop-filter: none;
backdrop-filter: grayscale(1);
backdrop-filter: brightness(1.5);
backdrop-filter: blur(5px);
backdrop-filter: contrast(.8);
backdrop-filter: invert(.7);
backdrop-filter: opacity(.4);
backdrop-filter: sepia(.4);
backdrop-filter: saturate(1.8);
backdrop-filter: hue-rotate(120deg);