カテゴリー
お問い合わせ

【CSS】すりガラス風デザインを作る！filter と backdrop-filter の違いと使い分け

HTML/CSS
目次

Webサイトのデザインで、背景が少し透けた「すりガラス」のようなオシャレな表現（グラスモーフィズム）を見かけることがありますよね。 これをCSSで実装する際によく使われるのがフィルター機能ですが、似たような名前の filter と backdrop-filter のどちらを使えばいいか迷ったことはありませんか？

「背景だけをぼかしたいのに、中のテキストまでボヤけてしまった…」というのは、この2つの使い分けを間違えている時によく起こる失敗です。

今回は、この2つのプロパティが「どの部分にエフェクトをかけるのか」という違いと、正しいすりガラス風デザインの作り方をデモを交えて解説します！

デモ動作

See the Pen filter と backdrop-filter の違い by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>フィルターの使い分けデモ</h2>
  
  <!-- =====================================
       1. filter を使った例（失敗しがち）
  ====================================== -->
  <div class="p-demo-block">
    <div class="p-demo-info">
      <h3 class="p-demo-title">1. filter</h3>
      <p class="p-demo-desc">要素「そのもの」にフィルターがかかるため、中の文字までボヤけてしまいます。</p>
    </div>
    
    <!-- 背景画像エリア -->
    <div class="p-demo-canvas">
      <!-- フィルターをかけるボックス -->
      <div class="p-glass p-glass--filter">
        <p class="p-glass__text">サンプルサンプル<br>サンプルサンプル</p>
      </div>
    </div>
  </div>

  <!-- =====================================
       2. backdrop-filter を使った例（成功例）
  ====================================== -->
  <div class="p-demo-block">
    <div class="p-demo-info">
      <h3 class="p-demo-title">2. backdrop-filter</h3>
      <p class="p-demo-desc">要素の「後ろの背景」にだけフィルターがかかるため、文字はくっきり見えます！</p>
    </div>
    
    <!-- 背景画像エリア -->
    <div class="p-demo-canvas">
      <!-- フィルターをかけるボックス -->
      <div class="p-glass p-glass--backdrop">
        <p class="p-glass__text">サンプルサンプル<br>サンプルサンプル</p>
      </div>
    </div>
  </div>

</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  font-size: 22px;
  text-align: center;
  color: #1bb4d4;
  margin-bottom: 40px;
}

/* デモのブロックごとの余白 */
.p-demo-block {
  margin-bottom: 50px;
}

/* 説明文エリア */
.p-demo-info {
  margin-bottom: 16px;
}
.p-demo-title {
  font-size: 22px;
  color: #1bb4d4;
  margin-bottom: 8px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 8px;
}
.p-demo-desc {
  font-size: 16px;
  font-weight: bold;
}

/* 背景画像エリア */
.p-demo-canvas {
  /* 上下で同じ画像が出るように id/29 を指定しています */
  background-image: url('https://picsum.photos/id/29/1000/600');
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* フィルターをかけるボックス（共通） */
.p-glass {
  padding: 40px 60px;
  border-radius: 12px;
  text-align: center;
  /* 必須：背景を半透明にする */
  background-color: rgba(0, 0, 0, 0.3);
}
.p-glass__text {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

/* =========================================
   フィルターの使い分け
========================================= */

/* 1. filter の例（文字までボヤける） */
.p-glass--filter {
  filter: blur(4px);
}

/* 2. backdrop-filter の例（綺麗なすりガラス） */
.p-glass--backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* Safari対応 */
}

コードの解説・違いまとめ

filter は「要素そのもの」にエフェクトをかける

/* 1. filter の例（文字までボヤける） */
.p-glass--filter {
  filter: blur(4px);
}

filter プロパティは、指定した要素全体（中のテキストや画像などの子要素も含めてすべて）に対してエフェクトをかけます。 写真自体の色味を変えたり、画像全体をぼかしたりする場合には最適ですが、要素の背景だけをぼかしたい時に使うと、デモの1つ目のように「文字まで読めなくなってしまう」ので注意が必要です。

backdrop-filter は「要素の後ろ側」にエフェクトをかける

/* 2. backdrop-filter の例（綺麗なすりガラス） */
.p-glass--backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* Safari対応 */
}

一方、backdrop-filter は、その要素の背後にある領域に対してエフェクトをかけます。要素の中身（テキストなど）には影響しないため、文字はくっきり読めるまま、背景だけをすりガラスのようにぼかすことができます。

【重要】半透明の背景色と一緒に使うこと

backdrop-filter を効かせるための最大の注意点は、要素の背景（background-color）を半透明にすることです。 rgba(0, 0, 0, 0.3) のように透過させないと、そもそも後ろの景色が透けて見えないため、フィルターの効果も画面に現れません。「プロパティを書いたのに効かない！」という時は、背景が不透明になっていないか確認しましょう。

補足：公式ドキュメントリンク

より詳しい仕様については、以下の公式ドキュメント等をご参照ください。

・MDN: filter
・MDN: backdrop-filter

まとめ

今回は、すりガラス風デザインに欠かせない backdrop-filter と、通常の filter の違いについて解説しました。

  • 画像や要素全体にエフェクトをかけたい時 ＝ filter
  • 背景だけをオシャレにぼかして中の文字は読ませたい時 ＝ backdrop-filter

この使い分けを覚えておけば、モダンなUIデザインをCSSだけで簡単に再現できるようになります。積極的に活用していきましょう！

Prev
Next

関連記事