CSSで背景をすりガラス風にぼかすには
backdrop-filter: blur() で要素の背後にあるものだけをぼかし、いわゆるすりガラス（フロストガラス）の見た目を作る基本形を示す。
要素自身の中身はぼけない。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<div class="scene">
<div class="glass">backdrop-filter で背後だけがぼける</div>
</div>.scene {
display: flex;
align-items: center;
justify-content: center;
height: 170px;
/* ぼけたことが分かるよう、細かい模様を背景に敷く */
background: repeating-linear-gradient(
45deg,
#0f766e 0 18px,
#10b981 18px 36px
);
font-family: system-ui;
}
.glass {
padding: 18px 22px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
/* 完全な透明にするとぼかす対象が透けないので、薄く色を乗せる */
background: rgba(255, 255, 255, 0.18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #fff;
font-size: 14px;
font-weight: 700;
}backdrop-filter は要素の背後にある描画結果にフィルタを掛けるプロパティで、filter と違って要素自身の文字や枠はぼけない。
背景を半透明にしておくのは、後ろが透けて見えなければぼかす対象そのものが見えないためである。
つまずき
何もぼけないときは、まず要素の background が不透明でないかを疑うとよい。
backdrop-filter は「後ろが透けて見えている部分」に働くので、background: #fff のように完全に塗りつぶすと効果が視認できない。
背後が単色の場合も同様で、ぼかしても色が変わらないため効いていないように見える。
上の例が背景に縞模様を敷いているのは、ぼけたことを目で確認できるようにするためである。
filter との違い
filter: blur() は要素自身の描画結果をぼかすため、上に載せた文字まで読めなくなる。
backdrop-filter がぼかすのは背後のレイヤーだけで、要素の中身は鮮明なまま残る。
カードの上に文字を置いて背景だけを和らげたいときは backdrop-filter を選ぶ。
逆にサムネイル画像そのものをぼかしたいときは filter が正しい。
接頭辞と適用範囲
Safari は長く -webkit-backdrop-filter しか解釈しなかったため、いまも接頭辞付きを併記しておくのが安全である。
また backdrop-filter は新しい重ね合わせ文脈を作るので、親要素に overflow: hidden や border-radius があると角の丸みからはみ出た部分が切り取られる。
意図どおりに丸まらないときは、ぼかす要素と角丸を同じ要素に指定しているかを確認する。