すりガラスの背景をCSSで作る｜backdrop-filterの使い方と、効かないときの原因・コピペで使える4種類

うしろの写真や色が、ぼんやり透けて見える「すりガラス」のような背景。スマホの通知や、最近のサイトのヘッダーでよく見かける表現です。これは画像を加工しなくても、CSSの backdrop-filter だけで作れます。

使いどころ

写真や色のある背景の上に、文字やメニューをのせるときに使う。うしろが白や単色なら、すりガラスにしても違いが出ないので使わない。

今回は、すりガラスのカード、上に固定したすりガラスのヘッダー、写真の上にのせる暗いすりガラス、効かないブラウザでも読めるすりガラスの帯の4種類を、コピペ用のコードつきで紹介します。ぼかしの強さと透かす量の目安、「付けたのに効かない」ときの原因、文字の読みやすさの確かめ方もまとめました。

連載「WEBの技術」の24回目です。
今回は「すりガラス」。見た目の印象は大きく変わりますが、文字が読めるかどうかの確認がいちばん大事な表現です。

完成見本：CSSだけで作った4種類

下の4つは、どれも画像を使わず、CSSだけで作っています。うしろの色の丸がゆっくり動いているので、ガラスの部分だけがぼけて見えるのが分かります。2のヘッダーは、本文がヘッダーのうしろをくぐるように動かしています。

GLASS CARD1. すりガラスのカード写真や色のある背景の上に、短い案内をのせるとき

STICKY HEADER2. 上に固定した、すりガラスのヘッダースクロールしても上に残るメニュー

DARK GLASS3. 写真の上にのせる、暗いすりガラス明るい写真の上に、白い文字を置くとき

WITH FALLBACK4. 効かないブラウザでも読める、すりガラスの帯古いブラウザの人が見ても困らないようにしたいとき

※ うしろの色の丸と文字は、ぼかしを見せるための見本の飾りです。見本は読み上げソフトでは読まれないようにしています。端末で「視差効果を減らす」など動きを減らす設定にしている場合は、うしろの動きが止まります。

コピペ用のコード

どれも、写真や色のある背景の上に置いて使います。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-gl は、サイトのほかのデザインと名前がぶつからないようにするための目印です。1〜3は、文字のクラス（kd-gl-ttl・kd-gl-txt）を1のCSSと共通で使います。

どのコードにも、backdrop-filter と、頭に -webkit- を付けた同じ指定の2行を入れています。MDNのブラウザ対応表では、Safariは18から -webkit- なしで使えますが、17以前は -webkit- を付けた書き方だけに対応しています。古いiPhoneで見る人のために、2行とも残しています。

1. すりガラスのカード

いちばん基本の形です。白を半分くらい透かした背景（rgba(255, 255, 255, .55)）に、backdrop-filter: blur(12px)（うしろに見えているものを、12pxぶんぼかす指定）を付けています。うしろの色はぼんやり透けたまま、形だけがぼけるので、上にのせた文字が読みやすくなります。

HTML

<div class="kd-gl-card">
  <p class="kd-gl-ttl">秋の撮影プラン</p>
  <p class="kd-gl-txt">10月31日まで受付中です。</p>
</div>

CSS

.kd-gl-card {
  max-width: 320px;
  padding: 20px 24px;
  border-radius: 16px;
  /* 白を55%だけ残して、うしろを透かす */
  background: rgba(255, 255, 255, .55);
  /* うしろに見えているものを、ぼかす */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* ふちに白い線を入れて、ガラスの縁に見せる */
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 24px rgba(16, 40, 58, .12);
  color: #10283A;
}
.kd-gl-ttl {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}
.kd-gl-txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

2. 上に固定した、すりガラスのヘッダー

スクロールすると、本文がヘッダーのうしろをくぐって、ぼんやり透けて見える形です。ヘッダーは position: sticky（スクロールしても、決めた位置に止まる指定）で上に止めています。ぼかしに saturate(160%)（色の鮮やかさを1.6倍にする指定）を足すと、透けた色がくすまず、明るいガラスに見えます。

HTML

<header class="kd-gl-head">
  <span class="kd-gl-logo">KAKERU</span>
  <span class="kd-gl-menu">メニュー</span>
</header>

CSS

.kd-gl-head {
  /* スクロールしても、上に止まる */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(255, 255, 255, .72);
  /* ぼかして、色を少し鮮やかにする */
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border-bottom: 1px solid rgba(16, 40, 58, .1);
  color: #10283A;
}
.kd-gl-logo {
  font-weight: 800;
  letter-spacing: .08em;
}
.kd-gl-menu {
  font-size: 14px;
}

3. 写真の上にのせる、暗いすりガラス

白ではなく、濃い紺を透かした形です。明るい写真の上に白い文字を置くと読みにくくなりますが、うしろを暗くしてぼかすと、写真の雰囲気を残したまま文字が読めます。透かす量は65%（.65）です。うしろがまっ白な場所でも、白い文字との明るさの差が足りるように決めています。

HTML

<div class="kd-gl-dark">
  <p class="kd-gl-ttl">WORKS</p>
  <p class="kd-gl-txt">これまでに作ったサイトの一覧です。</p>
</div>

CSS

.kd-gl-dark {
  max-width: 320px;
  padding: 20px 24px;
  border-radius: 16px;
  /* 濃い紺を65%。うしろが白くても白い文字が読める濃さ */
  background: rgba(16, 40, 58, .65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #FFFFFF;
}

4. 効かないブラウザでも読める、すりガラスの帯

すりガラスが効かないブラウザでは、うしろがぼけないまま透けて見え、文字が読みにくくなります。そこで、ふだんは白を90%にした「ほぼ白い帯」にしておき、@supports（そのブラウザが、ある指定に対応しているときだけ中のCSSを使う書き方）で、すりガラスに対応しているときだけ透かします。どちらの場合も、文字は読めます。

HTML

<p class="kd-gl-safe">ただいま、ご予約を受け付けています</p>

CSS

.kd-gl-safe {
  margin: 0;
  padding: 14px 20px;
  border-radius: 12px;
  /* 効かないブラウザ用：ほぼ白くして、文字を読めるようにする */
  background: rgba(255, 255, 255, .9);
  color: #10283A;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
/* すりガラスに対応しているときだけ、透かしてぼかす */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kd-gl-safe {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

※ コードの下の見本は、比べやすいように、うしろの動きを止めています。

仕組み：ぼかすのは「自分」ではなく「うしろ」

filter と backdrop-filter のちがい

CSSには、よく似た名前の filter という指定があります。filter: blur() は、その要素そのもの（文字も枠も）をぼかします。一方の backdrop-filter: blur() は、要素のうしろに見えている部分だけをぼかします。上にのせた文字はくっきりしたまま、うしろだけがぼけるので、すりガラスの見た目になります。

ぼかしのほかにも、saturate()（鮮やかさ）や brightness()（明るさ）など、filter と同じ関数が使えます。2のヘッダーのように、半角スペースで区切って並べると、順番にかかります。

背景を透かさないと、何も起きない

MDNでは、backdrop-filter の効果を見るには、要素やその背景が透明か半透明である必要があると説明されています。背景を #FFFFFF のようにまっ白にすると、うしろは見えないので、ぼかしてもまったく変わりません。そこで背景を rgba(255, 255, 255, .55) のように書き、最後の数字（0〜1）で「白をどれだけ残すか」を決めます。

付けたのに効かないときは、親を見る

「コードは合っているのに、ぼけない」ことがあります。よくある原因は、親の要素の指定です。MDNでは、親に opacity（1より小さい透明度）、filter、clip-path、mix-blend-mode などが付いていると、そこが「backdrop root（ぼかしの範囲の区切り）」になり、その親より外側はぼけないとされています。

たとえば、ふわっと表示するために親へ opacity: .9 を付けていると、すりガラスはその親の中にあるものしかぼかしません。効かないときは、開発者ツールで親を1つずつたどり、これらの指定がないかを見ます。

2のヘッダーは sticky と組み合わせる

2のヘッダーは、position: sticky と top: 0 で画面の上に止めています。スクロールすると本文がヘッダーのうしろを通るので、そこで初めてすりガラスの効果が見えます。z-index: 10 は、本文より手前に重ねるための指定です。固定ヘッダーそのものの作り方は、連載16回目の「ヘッダーを上に固定するCSS」で詳しく紹介しています。

数値を変えるとどうなるか

ぼかしの強さ（1の blur の数字）

同じカードで、ぼかしの強さだけを変えて並べました。うしろは止めてあります。

4px：うしろの形が残る

12px：目安の強さ

24px：色だけが残る

4pxでは、うしろの丸の形や文字がまだ分かり、ガラスの上の文字とまざって読みにくくなります。24pxまで強くすると、うしろは色のにじみだけになり、すりガラスというより、色の付いた板に見えます。KAKERUでは、カードのような小さい部品で10〜14px、ヘッダーのような細長い部品で8〜12pxくらいを目安にしています。

白の濃さ（rgba の最後の数字）

白20%：ほぼ透明

白55%：目安の濃さ

白85%：ほぼ白い板

白が薄すぎると、ぼかしていても、うしろの色の差がそのまま見えて、文字の読みやすさが場所によって変わります。濃すぎると、ほぼ白い板になり、すりガラスにした意味がなくなります。見本では、白55%を目安にしています。

効かないブラウザでの見え方（4の @supports）

backdrop-filter に対応していないブラウザでは、ぼかしだけが無視され、半透明の背景は残ります。左は、ぼかしを外して、半透明の白だけにした見え方です。うしろの文字が透けて、上の文字とまざっています。右は、4の見本のように、効かないときだけ白90%にした帯です。

ぼかしなしで透かしただけ

@supports で白90%にした帯

変えるところ	小さくすると	大きくすると
ぼかしの強さ（1の blur(12px)）	うしろの形が残り、上の文字とまざる	うしろが色のにじみだけになり、板のように見える
白の濃さ（1の .55）	うしろの色の差がそのまま見え、読みやすさが場所で変わる	ほぼ白い板になり、すりガラスに見えなくなる
鮮やかさ（2の saturate(160%)）	透けた色がくすみ、灰色っぽいガラスになる	色が派手になり、ガラスより色に目が行く
暗いガラスの濃さ（3の .65）	うしろが明るい場所で、白い文字が読みにくくなる	写真がほとんど見えなくなる

スマホと、見る人への配慮

文字の読みやすさは「いちばん明るい場所」で確かめる

すりガラスの上の文字は、うしろの写真によって背景の明るさが変わります。そこで見本では、ガラスの色をうしろの色に重ねた「いちばん読みにくい場合」で、文字との明るさの差（コントラスト）を計算しました。W3Cのアクセシビリティの基準（WCAG 2.2）では、ふつうの大きさの文字で4.5対1以上が目安です。

1のカード：うしろが青なら約9.5対1、うしろに紺の文字が重なる場所でも約5.6対1
2のヘッダー：うしろが青なら約11.4対1、紺の文字が重なる場所でも約8.5対1
3の暗いすりガラス：うしろがまっ白な場所でも、白い文字で約4.9対1
4の帯：すりガラスが効くときは、うしろが青なら約9.1対1、紺の文字が重なる場所でも約4.9対1。効かないときの白90%なら約12.5対1

ぼかしでうしろの色がまざると、明るさの差はこの数字より縮まらない側に動きます。ガラスの色や透かす量を変えたときは、うしろがいちばん明るい（暗い文字なら、いちばん暗い）場所を想定して、計算し直します。

透明が苦手な人の設定

OSには、画面の透明な表示を減らす設定があります。CSSには、その設定を読み取る prefers-reduced-transparency という指定もあります。ただ、MDNでは2026年10月時点で「Limited availability（主要ブラウザの一部だけ）」で、実験的な機能とされています。今回のコードには入れず、どのブラウザでも読めるように、ガラスの白を濃いめにしておく考え方にしています。

動く背景の上では、うしろを止められるように

完成見本では、ぼかしを見せるために、うしろの色の丸を動かしています。実際のサイトで動く背景とすりガラスを組み合わせるなら、@media (prefers-reduced-motion: reduce)（端末で動きを減らす設定にしている人向けの指定）で、うしろの動きを止めます。見本も、その設定では止まるようにしています。

やりすぎ注意

すりガラスは、1か所に使うと上品に見えますが、カードもボタンも見出しも全部すりガラスにすると、どこが大事なのかが分からなくなります。また、ぼかしはブラウザが毎回うしろを描き直して作る表示です。KAKERUでは、動く背景の上に何枚も重ねる使い方は避け、1画面に1〜2か所までにしています。この記事でも、コードの下の見本と比較の見本は、うしろを止めています。

すりガラスは「うしろに何があるか」で見え方が決まる表現です。
ためすときは、本番で使う写真を置いて、いちばん明るい場所で文字が読めるかを先に見ます。

AIに頼むなら

すりガラスは、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは「うしろに何がある場所か」「ぼかしの強さ」「白をどれだけ残すか」「効かないブラウザでの見え方」まで、まとめて伝えると手直しが少なく済みます。

写真の上にのせる、すりガラスのカードをCSSで作って。
backdrop-filter: blur(12px) と -webkit- 付きの2行、背景は白55%。文字は #10283A。
@supports で、効かないブラウザでは白90%にして文字が読めるようにして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

背景が透けているか。background: #fff のようにまっ白だと、ぼかしは見えません。rgba() の最後の数字が1未満になっているかを見ます
-webkit- の行と、効かないときの備えがあるか。backdrop-filter だけだと、古いSafariではぼけずに透けたままになります。@supports で白を濃くする形になっているかを見ます
本番の写真の、いちばん明るい場所で文字が読めるか。見本の背景では読めても、実際の写真に替えると読みにくくなることがあります。暗いガラスに白い文字なら、うしろがまっ白な場所で確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

写真を大きく使ったページの、上に固定したヘッダー。スクロールで写真がヘッダーのうしろを通っても、メニューの文字が読めます。写真の色が透けるので、ヘッダーが写真から浮いて見えません
メインの写真の上にのせる、短い案内。「秋の撮影プラン」のように、写真の雰囲気を残したまま一言のせたいときに、1か3の形を使います
画面の上に重ねて出す、メニューや小さな窓。開いたメニューのうしろで、元のページがぼんやり見えると、どこから開いたのかが分かりやすくなります

使わない場面

うしろが白や単色のページ。透けて見えるものがないので、ぼかしても違いが出ません。ふつうの白い背景や、淡い色の背景で十分です
長い文章や、料金・注意事項。うしろの写真で読みやすさが場所によって変わるので、しっかり読んでほしい文章は、白や単色の背景に置きます
ページの中の、ほとんどの部品。カードもボタンも全部すりガラスにすると、どこが大事か分からなくなります。使うのは、1画面に1〜2か所までにしています

すりガラスにする前に、「うしろに見せたいものがあるか」を考えます。
見せたい写真があるときだけ使うと、ガラスの部分も写真も、両方が生きます。

まとめ

すりガラスは、CSSの backdrop-filter で作れる。ぼかすのは要素のうしろだけ
背景を rgba() で半透明にしないと、効果は見えない
付けたのに効かないときは、親に opacity・filter・clip-path などがないかを見る
ぼかしは10〜14px、白は55%くらいが目安。-webkit- の行と @supports の備えも入れる
文字の読みやすさは、うしろがいちばん明るい（暗い）場所で計算して確かめる
使うのは、うしろに見せたい写真や色があるときだけ。1画面に1〜2か所まで

まずは1の「すりガラスのカード」のコードをコピーして、自分のサイトの写真の上で試してみてください。そのあと blur(12px) と .55 の数字を変えると、見え方の変わり方がよく分かります。

参考にした資料

いずれも2026年10月26日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「backdrop-filter」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter
※要素のうしろに見えているものにぼかしなどをかけること。効果を見るには要素の背景を透かす必要があること。Baseline 2024（2024年9月から主要ブラウザの最新版で使える）。親に opacity などがあると効く範囲が変わる「backdrop root」の説明
MDN Browser Compatibility Data「backdrop-filter」（英語）
https://bcd.developer.mozilla.org/bcd/api/v0/current/css.properties.backdrop-filter.json
※Chrome 76・Firefox 103・Safari 18から接頭辞なしで使えること。Safari 17以前は -webkit- を付けた書き方で使えること
MDN「@supports」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports
※ブラウザがある指定に対応しているときだけ、中のCSSを使えること
MDN「filter」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter
※filter は要素そのものに、backdrop-filter は要素のうしろにかかること（関数の種類は共通）
MDN「prefers-reduced-transparency」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency
※透明な表示を減らしたい人の設定を読み取る指定。Limited availability（主要ブラウザの一部だけ）で、実験的な機能とされていること
MDN「position」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position
※sticky の要素は、スクロールしても決めた位置で止まること
W3C「Understanding SC 1.4.3 Contrast (Minimum)」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
※ふつうの大きさの文字は、背景と4.5:1以上の明るさの差があること