backdrop-filterですりガラス効果を出そう

このレッスンでは、backdrop-filterを使ったすりガラス効果の作り方を学び、モダンなUIデザインの視覚効果を実現できるようになることを目標にします。「CSS backdrop-filter 使い方」で調べている方向けです。

backdrop-filter: blur(値)を使うと、要素の「背景に写り込んでいるもの」をぼかせます。半透明の背景と組み合わせると、スマホアプリでよく見る「すりガラス」のような見た目を作れます。

サンプルコードでは、グラデーションの背景の上に、半透明の白(rgba(255,255,255,0.3))とbackdrop-filter: blur(8px);を組み合わせたパネルを重ねています。パネルの奥にある背景が、ぼやけながらも透けて見える様子を確認してみましょう。

初心者がよくつまずくのが、backdrop-filterと通常のfilterプロパティの違いです。filterは要素自体にぼかしなどをかけますが、backdrop-filterは要素の「背後にあるもの」にだけ効果をかける、という違いがあります。

通知パネルやモーダルウィンドウの背景に使うと、後ろのコンテンツをうっすら透かしつつも読みやすさを保てる、洗練された見た目を演出できます。近年のUIデザインで人気の高い視覚効果です。