できない.dev

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 のように完全に塗りつぶすと効果が見えない。
  • 背後が単色である。ぼかしても色が変わらないため、効いていないように見える。

上の例が背景に縞模様を敷いているのは、ぼけたことを目で確認できるようにするためである。

できない例: 背景が不透明
.scene {
  padding: 22px;
  background: repeating-linear-gradient(45deg,
    #0f766e 0 14px, #10b981 14px 28px);
}
.glass {
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #0f766e;
  font: 700 14px system-ui;
}
できない例: 背後が単色
.scene {
  padding: 22px;
  background: #0f766e;
}
.glass {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 700 14px system-ui;
}
できる例: 半透明の背景＋模様のある背後
.scene {
  padding: 22px;
  background: repeating-linear-gradient(45deg,
    #0f766e 0 14px, #10b981 14px 28px);
}
.glass {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 700 14px system-ui;
}

filter との違い

filter: blur() は要素自身の描画結果をぼかすため、上に載せた文字まで読めなくなる。
backdrop-filter がぼかすのは背後のレイヤーだけで、要素の中身は鮮明なまま残る。

  • カードの上に文字を置いて背景だけを和らげたい → backdrop-filter
  • サムネイル画像そのものをぼかしたい → filter
できない例: filter: blur()（文字までぼける）
.scene {
  padding: 22px;
  background: repeating-linear-gradient(45deg,
    #0f766e 0 14px, #10b981 14px 28px);
}
.glass {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(3px);
  color: #fff;
  font: 700 14px system-ui;
}
できる例: backdrop-filter: blur()
.scene {
  padding: 22px;
  background: repeating-linear-gradient(45deg,
    #0f766e 0 14px, #10b981 14px 28px);
}
.glass {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 700 14px system-ui;
}

接頭辞と適用範囲

Safari は長く -webkit-backdrop-filter しか解釈しなかったため、いまも接頭辞付きを併記しておくのが安全である。

また backdrop-filter は新しい重ね合わせ文脈を作るので、親要素に overflow: hidden や border-radius があると、角の丸みからはみ出た部分が切り取られる。
意図どおりに丸まらないときは、ぼかす要素と角丸を同じ要素に指定しているかを確認する。

このコードで動いた？