[CSS] 磨りガラスを再現する、backdrop-filter

はじめに

2024に新しく最新ブラウザに組み込まれた機能から、今回は backdrop-filter を取り上げます。
https://web.dev/baseline/2024?hl=ja

backdrop-filter は CSS に加えられた項目の一つで、背景にグラフィック効果を追加することができます。たとえば背景をぼかしたり、色を反転させたりする際に便利です。

基本

背景ぼかしなど、背景に対するグラフィック効果を実装する場合、これまでは before などの疑似要素に filter プロパティを使って実装したりすることがほとんどでした。

<div class="container">
  <div class="content">sample content</div>
</div>

.container {
  position: relative;
}

.container::before {
  content: '';
  transform: translate(-50%, -50%);
  height: 3rem;
  width: 100%;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: blur(5px);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5rem;
  width: 100%;
  transform: translate(-50%, -50%);
}

原理としては、二重にした div 要素の外側に背景画像をつけ、内側の要素とおなじサイズの疑似要素を作成して外側の背景をコピー、ここに filter で画像効果を与えることで実現しています。疑似要素を使用することによって CSS の記述が長くなるほか、記述と挙動が直感的ではなくなるためメンテナンス性も落ちます。
また、この方法では明確な境界線を持ったぼかしは実現できません。一般にグラスモーフィズムといわれるような、擦りガラスのような透明感のある UI をつくるためには、もっと凝った手間をかける必要がありそうです。

これを一手に解決するのが backdrop-filter です。背景効果を加えたい要素に直接付与することで、疑似要素に頼らなくてよくなります。

.content {
  backdrop-filter: blur(10px);
}

ぼかしを加える

backdrop-filter プロパティに渡す値は、基本的には filter と同じです。ぼかしを加えたい場合は blur() を使用します。

backdrop-filter: blur(10px);

色反転させる

部分的に色反転させたい場合、invert() が役に立ちます。

backdrop-filter: invert(1);

彩度を調整する

部分的に彩度を落としたい場合は saturate() が使用できます。
引数を調整することで、彩度を上げることも可能です。

backdrop-filter: saturate(0);   // 彩度を 0 にする（モノクロ）
backdrop-filter: saturate(5);   // 彩度を 5 倍にする

---

backdrop-filter に適用できる関数の詳細は、以下を参照にするとよいです。

https://developer.mozilla.org/ja/docs/Web/CSS/filter-function

参照

https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter