エフェクト
backdrop-filter
backdrop-filter は、要素の後ろに見えているものにぼかしや色の変化をかけます。すりガラスのような半透明のパネルを作るときの定番です。
構文
none | <filter-value-list>
<filter-value-list> = [ <filter-function> | <url> ]+プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background-color: #ffffff33;
border-radius: 16px;
backdrop-filter: blur(8px);
}コントロール
blur(8px)
<length>
関数を追加
解説
filter との違い
filter は要素そのもの（子要素も含む）を加工しますが、backdrop-filter は要素の後ろにあるものだけを加工し、要素自身の背景や文字はそのまま描きます。使える関数は filter と同じで、空白で区切って並べると左から順にかかります。
背景を半透明にする
加工された後ろの景色は、要素の背景の下に描かれます。背景が不透明だと何も見えないので、半透明の背景色と組み合わせます。このページのプレビューでは background-color: #ffffff33 を付けていて、後ろの模様はプレビュー用の飾りです。 効果がかかるのは要素の枠の内側だけで、border-radius の角丸にも沿います。
気をつけること
filterと同じく、none以外を指定するとスタッキングコンテキストと、position: fixedの子孫の基準になります。- 祖先に
filterや 1 未満のopacity、mix-blend-modeなどがあると、加工されるのはその祖先の中に描かれたものまでになります。 思ったより後ろがぼけないときは、祖先のスタイルを確かめてください。 - ぼかしは描画の負荷が高めです。広い面積や、スクロールで動き続ける要素に多用しないようにしましょう。