カードの文字までぼける？filterとbackdrop-filterで効果をかける場所を分けよう

半透明のカードの後ろをぼかしたくてfilter:blur()を書いたら、文字まで読みにくくなった。ぼかす強さだけでなく、効果をかける対象を確認しよう。

このページはCSSの背景色を指定したことがある人向け。縞模様の上へカードを重ね、filterとbackdrop-filterを切り替える。画像ファイルや外部サービスは使わず、ブラウザだけで試せるよ。

filterは、指定した要素の描画へ作用する

.card {
  filter: blur(4px);
}

この例のfilterは、カード自身とその内容を描いたものへぼかしをかける。背景だけでなく、文字や枠もぼけるんだ。文字を別にくっきり残したい場面で、そのままカード全体へ指定すると目的と合わないことがある。

作例の「filter」を選ぶと、紫と黄色の縞模様そのものより、上に載せたカードの文字や輪郭がぼける様子を見られるよ。

backdrop-filterは、要素の背後の範囲へ作用する

.card {
  background-color: rgb(255 255 255 / 40%);
  backdrop-filter: blur(4px);
}

backdrop-filterは、その要素の背後にある範囲へ効果をかける。カードの文字をぼかす指定ではないため、この例では文字が読めるまま、背後の縞模様の境目がぼけるよ。

背後の変化を見るには、要素や背景の少なくとも一部が透明である必要がある。作例の背景色を半透明にしているのは、そのため。完全に不透明な白い背景で覆ってしまうと、後ろの変化は見えないんだ。

同じ4pxで切り替える

ページ内作例では、次の三つを比べられる。指定する数字はどちらも4pxに固定し、効果をかける場所だけを変えるよ。

1. 指定なしで、文字と縞の境目を見る。
2. filterを選び、文字と枠のぼけを確認する。
3. backdrop-filterを選び、文字を保ったまま背後の境目が変わることを見る。
4. 「最初から試す」で、両方noneの状態へ戻す。

作例はbackdrop-filterの対応可否も表示する。対応しないブラウザではその選択肢を使えないようにしているので、表示欄と利用するブラウザの対応状況を確認してね。

半透明の色と、全体のopacityを混ぜない

背景色のアルファ値を40%にすることと、カード全体へopacity:0.4を指定することも別だよ。後者は文字も含めて透明になり、重なりの条件にも影響する。

今回は背景色だけを半透明にし、カード全体のopacityは変えていない。blurの対象と透明にする対象を同時に変えず、一つずつ確かめると原因を見つけやすいね。

読めることを最後に確認する

後ろがぼけても、文字色と背景の組み合わせによっては読みにくさが残る。模様が明るい場所・暗い場所の両方で、文字が十分に区別できるか確認しよう。ぼかしを強くすれば自動で読みやすくなるわけではないよ。

2026年10月29日にMDNの作用対象と透明度の条件を確認し、作例の切り替え・リセットをスマホ幅とPC幅で検証した。縞模様の画素の変化も比較している。この固定した重なりの例を、複雑な祖先の効果やすべての描画条件へ一般化しないでね。透明度の違い、重なりのまとまりも参考になるよ。