背景フィルタで OS 風の背景を作成する

要素の背後にあるぼかしと色の変化。

Adam Argyle

Joe Medley

これまで、これらの手法はウェブで実装するのが難しく、完璧とは言えないハックや回避策が必要でした。近年、Safari と Edge の両方で、background-filter（または -webkit-backdrop-filter）プロパティを使用して、フィルタ関数に基づいて前景色と背景色を動的にブレンドする機能が提供されています。Chrome はバージョン 76 以降、background-filter をサポートするようになりました。

ブラウザ サポート

backdrop-filter がサポートされていない場合は、パフォーマンス上の理由から、ポリフィルではなく画像にフォールバックします。次の例はこれを示しています。

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

基本

• backdrop-filter プロパティは、要素に 1 つ以上のフィルタを適用し、要素の背後にあるものの外観を変更します。
• オーバーレイ要素は、少なくとも部分的に透明にする必要があります。
• オーバーレイ要素は新しいスタック コンテキストを取得します。

CSS backdrop-filter は、半透明または透明の要素に 1 つ以上の効果を適用します。以下の画像で理解できます。

フォアグラウンドの透明性なし

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

フォアグラウンドの透明度

.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

左側の画像は、backdrop-filter が使用されていない場合やサポートされていない場合に、重なり合う要素がどのようにレンダリングされるかを示しています。右側の画像は、backdrop-filter を使用してぼかし効果を適用しています。backdrop-filter に加えて opacity を使用していることに注意してください。opacity がないと、ぼかしを適用する対象がありません。opacity が 1（完全に不透明）に設定されている場合、背景には影響しません。

backdrop-filter プロパティは、blur()、brightness()、contrast()、opacity()、drop-shadow() など、お好みのフィルタ関数がすべてサポートされている点で、CSS フィルタに似ています。また、外部画像をフィルタとして使用する場合は url() 関数、キーワード none、inherit、initial、unset もサポートしています。構文、フィルタ、値の説明など、これらすべてについては MDN で説明されています。

backdrop-filter が none 以外に設定されている場合、ブラウザは新しいスタッキング コンテキストを作成します。要素に絶対位置と固定位置の子孫がある場合に限り、包含ブロックを作成することもできます。

複数のフィルタを組み合わせて豊かで巧妙な効果を実現したり、1 つのフィルタだけを使用して繊細な効果や細かい効果を実現したりできます。SVG フィルタと組み合わせることもできます。

例

これまではオペレーティング システムに限定されていたデザイン手法やスタイルが、1 つの CSS 宣言で実現できるようになりました。例をいくつか見てみましょう。

単一フィルタ

次の例では、色とぼかしを組み合わせることでつや消し効果を実現しています。ぼかしは backdrop-filter により提供され、色は要素の半透明の背景色から取得されます。

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}

複数のフィルタ

目的とする結果を得るには、複数のフィルタが必要になる場合があります。これを行うには、フィルタのリストをスペース区切りで指定します。例:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

次の例では、4 つのペインのそれぞれで背景フィルタの組み合わせが異なる一方で、同じシェイプのセットはそのペインの背後にアニメーション化されています。

オーバーレイ

この例では、半透明の背景をぼかして、ページの背景とスタイルを統一しながらテキストを読みやすくする方法を示します。

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

動的な背景でのテキストのコントラスト

前述のように、backdrop-filter を使用すると、ウェブでは難しい、または不可能な高パフォーマンスのエフェクトを実現できます。たとえば、アニメーションに応じて背景を変更するなどです。この例では、backdrop-filter は、テキストの背後で何が起こっているかにかかわらず、テキストと背景の間に高いコントラストを維持します。デフォルトの背景色 darkslategray で始まり、変換後に backdrop-filter を使用して色を反転します。

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}

まとめ

過去数年間に 560 人を超えるユーザーが Chromium のバグに賛成票を投じており、この機能が CSS ユーザーから長い間待ち望まれていることが明らかです。Chrome バージョン 76 で backdrop-filter がリリースされ、ウェブは真の OS ライクな UI 表示に一歩近づきました。

参考情報

• の仕様
• Chrome プラットフォームのステータス
• MDN
• background-filter（CSS Tricks）
• Codepen のサンプル