【CSS】backdrop-filterの使い方｜背景ぼかし・明るさ調整を一発適用

【CSS】backdrop-filterの使い方｜背景ぼかし・明るさ調整を一発適用 HTML/CSS

CSS の backdrop-filter プロパティを使うと、要素の背後にある背景に対して「ぼかし」「明るさ調整」「彩度変更」などの効果を適用できます。ガラスのような半透明デザインや、背景を目立たせずに前面コンテンツを読みやすくする表現に最適です。本記事では backdrop-filter の基本的な使い方と注意点を解説します。

基本構文

.overlay {
  backdrop-filter: blur(8px);
}

指定できる値は filter プロパティと同様で、blur()・brightness()・contrast()・saturate()・grayscale() などを組み合わせて利用できます。

背景をぼかす（ガラス効果）

<div class="glass">
  <p>背景がぼけて透けます</p>
</div>

.glass {
  background-color: rgba(255, 255, 255, 0.3); /* 半透明の背景 */
  backdrop-filter: blur(10px);                /* 背景をぼかす */
  -webkit-backdrop-filter: blur(10px);        /* Safari用 */
  padding: 20px;
  border-radius: 12px;
}

背景画像や動画の上に重ねると、モダンな「ガラスモーフィズム」表現になります。

明るさ・彩度を調整する

brightness() や saturate() を組み合わせることで、背後のコンテンツを明るくしたり、色鮮やかにできます。 

.overlay-bright {
  backdrop-filter: brightness(1.3) saturate(1.5);
}

複数効果の組み合わせ

複数のフィルターをスペースで区切って指定可能です。 

.frosted {
  backdrop-filter: blur(6px) brightness(0.8) contrast(1.2);
}

適用時の注意点

  • backdrop-filter を有効にするには、対象要素に 背景が半透明（rgba や transparent）である必要があります。
  • Safari では -webkit-backdrop-filter が必要です。
  • 一部の古いブラウザでは非対応のため、フォールバックとして background-color で代替表現を用意すると安心です。
  • 描画コストが高いため、広範囲に多用するとパフォーマンスに影響する可能性があります。

まとめ

backdrop-filter は、背景をぼかしたり明るさを調整することで視認性とデザイン性を両立できる便利な CSS プロパティです。
ガラス風デザインやモーダルの背景処理に特に有効ですが、対応ブラウザやパフォーマンスに注意しつつ活用しましょう。