backdrop-filterでぼかし・すりガラスUIを実装する【CSS】

投稿日 2026年8月4日
著者くまだ
カテゴリー Web制作

どうも、くまだです。

CSSのbackdrop-filterプロパティのメモ。

backdrop-filter とは？

backdrop-filterは、要素の背景（後ろに透けて見えている部分）にフィルターをかけるCSSプロパティです。filterプロパティと混同しやすいです。

filter : 要素そのもの（テキストや画像ごと全体）
backdrop-filter :要素の背景（透過越しに見える部分だけ）

要素の背景（透過越しに見える部分だけ） |

すりガラス効果を作るには`backdrop-filter`を使います。`filter`では要素全体がぼけてしまうので用途が異なります。

blur() で背景をぼかす

最もよく使う値はblur()です。

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

blur()の数値を大きくするほどぼかしが強くなります。

他にも以下のような値が使えます。

/* 明るさを上げる */

backdrop-filter: brightness(1.2);


/* コントラストを変える */

backdrop-filter: contrast(1.5);


/* グレースケール */

backdrop-filter: grayscale(100%);


/* 色相を回転させる */

backdrop-filter: hue-rotate(90deg);


/* 彩度を変える */

backdrop-filter: saturate(180%);


/* 複数まとめて指定もできる */

backdrop-filter: blur(10px) brightness(1.1) saturate(150%);

すりガラス実装するなら以下のようになります。

  <div class="bg-wrapper">

    <!-- ぼかしたい背景（画像や色など） -->

    <div class="content">

      <div class="glass-card">

        <h2>タイトル</h2>

        <p>カードの中身テキストがここに入ります。</p>

      </div>

    </div>

  </div>

.bg-wrapper {
  position: relative;
  background-image: url('dummy.png');
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;

}

/* すりガラスカード */

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  /* Safari用 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 2rem;
  color: #fff;
}