CSSプロパティ backdrop-filter：要素の背後をスタイリッシュに演出

backdrop-filterは、要素の背後にある背景に、ぼかしや色調調整などの視覚効果を適用できるCSSプロパティです。ガラス越しのような効果や、背景画像をぼかしてコンテンツを際立たせるなど、デザインの幅を広げることができます。

1. backdrop-filter の基礎

backdrop-filter プロパティは、要素の背後にある背景に対してのみ適用されます。要素自体には影響しません。効果を視覚化するには、要素またはその背景に透明度を設定する必要があります。

1.1. 構文


  backdrop-filter: none | <filter-function-list>;

none: フィルター効果を適用しない、デフォルト値です。
<filter-function-list>: 適用するフィルター関数のリストを指定します。複数の関数を組み合わせることも可能です。

1.2. 主なフィルター関数

backdrop-filterプロパティでは、様々なフィルター関数を指定できます。ここでは、よく使われるものをいくつか紹介します。

フィルター関数	説明
`blur()`	ぼかし効果を適用します。引数にはぼかしの程度を指定します。
`brightness()`	明るさを調整します。引数には0より小さい値で暗く、1より大きい値で明るくします。
`contrast()`	コントラストを調整します。引数には0より小さい値でコントラストを下げ、1より大きい値でコントラストを上げます。
`grayscale()`	グレースケールに変換します。引数には0〜1の値を指定し、1で完全にグレースケールになります。
`sepia()`	セピア調に変換します。引数には0〜1の値を指定し、1で完全にセピア調になります。
`hue-rotate()`	色相を回転させます。引数には回転角度を指定します。
`invert()`	色を反転させます。引数には0〜1の値を指定し、1で完全に反転します。
`opacity()`	透明度を調整します。引数には0〜1の値を指定し、0で完全に透明になります。
`saturate()`	彩度を調整します。引数には0より小さい値で彩度を下げ、1より大きい値で彩度を上げます。
`drop-shadow()`	ドロップシャドウを適用します。引数には影のオフセット、ぼかし、色を指定します。

2. backdrop-filter の使用例

2.1. 背景画像をぼかす


  <div class="container">
    <h2>ぼかし効果のサンプル</h2>
    <p>背景画像がぼかされています。</p>
  </div>


  .container {
    width: 300px;
    height: 200px;
    background-image: url("background.jpg");
    backdrop-filter: blur(10px);
  }

2.2. 磨りガラス効果を適用する


  <div class="frosted-glass">
    <h2>磨りガラス効果のサンプル</h2>
    <p>背景が磨りガラスのように見えます。</p>
  </div>


  .frosted-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px) brightness(1.2);
  }

2.3. マウスの動きに合わせて背景のぼかし具合を変える


  <div class="dynamic-blur">
    <h2>マウスオーバーで背景ぼかし</h2>
  </div>


  .dynamic-blur {
    background-image: url("background.jpg");
    backdrop-filter: blur(var(--blur-amount));
    --blur-amount: 0px;
  }

  .dynamic-blur:hover {
    --blur-amount: 10px;
  }

3. ブラウザ対応状況

backdrop-filter プロパティのブラウザ対応状況は、Can I use を参照してください。

4. 注意点

backdrop-filter は、特にモバイルデバイスにおいて、パフォーマンスに影響を与える可能性があります。そのため、使用する際は注意が必要です。
パフォーマンスを最適化するために、フィルター効果を適用する範囲を限定したり、ハードウェアアクセラレーションを活用したりするなどの対策を検討しましょう。

よくある質問

Q1. `backdrop-filter` と `filter` の違いは何ですか？

filter プロパティは要素自身に視覚効果を適用するのに対し、backdrop-filter は要素の背後にある背景に視覚効果を適用します。

Q2. `backdrop-filter` が効かないのですが？

以下の点を確認してください。

要素またはその背景に透明度が設定されているか
使用するブラウザが backdrop-filter に対応しているか

Q3. `backdrop-filter` のパフォーマンスを向上させるには？

以下の対策が考えられます。

フィルター効果を適用する範囲を限定する
ハードウェアアクセラレーションを活用する
複雑なフィルターの組み合わせを避ける