CSSのbackdrop-filterを使ってグレーアウトした背景をくり抜く

はじめに

下画像のようなviewを作ってくれと言われて皆さんはさらっと作れますか？私は作れませんでした😰

特定の部分を目立たせるために、その他全体をグレーアウトした背景を実装したかったのですが、なかなか出来ませんでした
めげずに色々やってはみたのですが(clip-pathや背景を細かく切って繋げる、背景の上に要素を乗せるなど)、どれもピンと来ず再現できているとは言い難い出来で、もうこんなview作るのは無理ゲーだと考えた私は先輩エンジニアに相談しました。

そこで先輩に言われたアドバイスが今回の実装方法です。

「<font color="Red">backdrop-filter: brightness</font>を使ったらいいんじゃない？」

実装方法

上記のbackdrop-filter: brightnesを使うことでグレーアウトした背景の一部をくり抜いているように見せることができました。

以下が具体的なコードです。

.full-gray-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  z-index: 5;
}

.highlight-area {
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
  backdrop-filter: brightness(250%); // ポイント
  height: 296px;
  width: 195px;
  top: 171px;
  left: 15px;
  z-index: 5;
}

上記のコードが何をしているかというと、highlight-areaをグレーアウトした背景に重ね、そこに光を当てるイメージで背景のくり抜きを再現しています。

つまり、実際に背景をくり抜いているわけではなく、<font color="Red">グレーアウトに要素(highlight-area)を重ね、その明るさを上げることでまるでその部分の背景がないかのように見せている</font>ということです。
backdrop-filter: brightnessの値を増やせば明るさをより強くすることもできます。

backdrop-filterは、要素の背後の領域にぼかしや色変化のようなグラフィック効果を適用することが可能なCSSです。今回は、brightness関数を使うことで背後領域の明るさを調節しています。

注意点は全画面の背景が少しも光を通さないと、いくら明るくしたところで背景のくり抜きは再現できないことです。
光を通さないものにいくら光を当てても明るくはならないので。

終わりに

一部がくり抜かれた背景を再現するために、要素を重ねるという今回の実装方法はなかなか面白いものだったと感じました。
フロントサイドにしろ、サーバーサイドにしろ詰まった時は考える視点を変えてみることが重要だと感じました。