くもりガラス
backdrop-filter
自分の後ろにあるものをぼかす。写真の上でも文字が読める板が作れる。
AIへの頼み方
写真の上に半透明のパネルを重ねて、パネルの後ろがぼけるようにしてください。backdrop-filter を使い、-webkit- を併記してください。未対応の環境では不透明な背景にして文字が読めるようにするフォールバックも入れてください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
.glass {
/* 板そのものは半透明にしておく（完全に不透明だと後ろが見えない）*/
background: rgba(255, 255, 255, .55);
/* 「自分の後ろ」をぼかす。filter（自分自身にかかる）との違いがここ */
-webkit-backdrop-filter: blur(8px) saturate(1.25);
backdrop-filter: blur(8px) saturate(1.25);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 12px;
}
/* 未対応環境では透けない板にして、読みやすさを守る */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.glass { background: #fff }
}
/* 注意：
- 重ねすぎると描画が重くなる。画面に2〜3枚までを目安に
- 背景が明るい写真だと文字が沈む。板の不透明度で調整する */対応状況
新顔 2026年08月時点で確認
設計 §9 の想定は「定番」だったが実確認では Baseline newly available（2024-09-16・Safari 18 で全エンジン対応）。Safari 向けに `-webkit-` 併記が要る点は従来どおり。
-webkit- 併記とフォールバックがあれば実案件で使える。数を絞って使う。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
写真の上に文字を置きたいときに向く。写真をそのまま活かしながら、文字が乗る部分だけ後ろをぼかせるので、暗い帯で覆うより写真が死なない。ヒーロー画像のキャプション、画像の上のラベル、スクロールしても残るヘッダなど。
自分自身をぼかす filter と混同しやすいが、こちらは自分の後ろにかかる。パネルの中の文字はくっきりしたまま、背景だけがぼける。
避けたいのは重ねすぎ。1画面に2、3枚までにする。ぼかしは画面を描き直すたびに計算が要るので、増えるとスクロールが引っかかる。とくに古い端末で差が出る。
背景が明るい写真にも注意する。白い空の上に白いパネルを置くと、ぼけても文字が沈む。板そのものの不透明度を上げるか、文字色を濃くして確かめる。
未対応の環境ではぼけずに透けたままになる。つまり文字が読めない状態が残るので、@supports で不透明な背景に切り替えるフォールバックを必ず添える。「きれいに見えない」ではなく「読めない」に転ぶ機能なので、ここは省けない。
読みやすさを確かめるときは、いちばん条件の悪い写真で見る。うまくいく写真で確認しても意味がない。