【CSS Modules】backdrop-filterプロパティの使い方

backdrop-filterプロパティは、指定された要素の「背後」にあるコンテンツに対して、ぼかしや明るさ調整などのグラフィック効果を適用するためのプロパティです。要素自身の見た目を変更するのではなく、その背後に透けて見える部分にフィルター効果をかける点が特徴です。

このプロパティは、例えば半透明のモーダルダイアログやナビゲーションバーの背後にあるウェブページの内容を、視覚的に区別するためにぼかしたり、暗くしたりする際などに非常に役立ちます。具体的には、blur()（ぼかし）、brightness()（明るさ）、contrast()（コントラスト）、grayscale()（グレースケール）、sepia()（セピア）などのフィルター関数を一つまたは複数組み合わせて適用できます。複数の関数を指定する場合は、スペースで区切って記述します。効果を適用しない場合はnoneを指定します。

backdrop-filterプロパティの効果は、要素自体に透明性がある場合にのみ視覚的に現れます。例えば、背景色がrgba形式で透明度を持つ場合や、opacityプロパティが1未満に設定されている場合などです。透明度がない要素にこのプロパティを適用しても、背後のコンテンツが見えないため、効果は確認できません。

同じCSSのfilterプロパティと混同されがちですが、filterプロパティが要素自身のコンテンツ（画像、テキストなど）に効果を適用するのに対し、backdrop-filterプロパティは要素の「背後」にあるコンテンツにのみ効果を適用するという重要な違いがあります。このプロパティはGPUによるアクセラレーションを利用して高速に処理されることが多いですが、複雑なフィルターを多用するとパフォーマンスに影響を与える可能性もあるため、使用には注意が必要です。

Copy
1.example-element {
2  backdrop-filter: blur(5px);
3}

引数なし

引数はありません

戻り値なし

戻り値はありません