backdrop-filterは、要素の背後の領域に「ぼかし」などの効果を加えることができるプロパティで、2024年に全てのブラウザで使用が可能になった比較的新しいプロパティです。
CSS のぼかしというと、一昔前まではfilterプロパティのblur()を使う方法が主流でしたが、filterプロパティを使用する方法では要素の中身までぼやけてしまうため、背景のみをぼかすためには疑似要素を追加したりと少し複雑な手法が必要でした。
この記事では、backdrop-filterによるぼかしの方法と、ぼかしを使用したいくつかのアイデアを紹介します。
backdrop-filter によるぼかしの方法
例えば、以下のようなページがあったとします。bodyに背景画像が指定してあり、その中に画面いっぱいに広げたh1が一つだけのシンプルなページです。
See the Pen backdrop-filter sample 1 by YUTSUZO (@YUTSUZO) on CodePen.
ここにぼかしを加えるために、h1要素にbackdrop-filter: blur();を追加します。( ) 内には、ぼかしの度合いをpxなどの単位で指定します。今回は、5pxを指定してみます。
h1 {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
font-size: 48px;
font-weight: 600;
color: #fff;
backdrop-filter: blur(5px); /* これを追加 */
}たったこれだけで、ぼかしがかかるようになりました。
See the Pen backdrop-filter sample 2 by YUTSUZO (@YUTSUZO) on CodePen.
注意点として、backdrop-filterは適用した要素の背後にあるものに対してのみ効果を及ぼします。イメージ的には、要素と同じ大きさのすりガラスを敷くようなイメージです。
そのため、全体をぼかすには、適用する要素を親要素（背景画像を指定している要素）と同じ大きさまで広げる必要があります。さらに、backdrop-filterを適用する要素は、背後の要素が透けている必要があります。
逆に言うと、一部分だけをぼかしたり、透けてさえいれば色を付けることも可能です。
backdrop-filter の使用例
テキストの可読性を上げる
See the Pen backdrop-filter sample 3 by YUTSUZO (@YUTSUZO) on CodePen.
画像上のテキストに、透過の背景色rgba(255, 255, 255, 0.5)とともにbackdrop-filterでぼかしを加えた例です。
背景色だけでは下の写真が透けて読みにくい場合でも、ぼかしを入れることで可読性を向上させることができます。常に上部に表示される追尾型のヘッダーなどにも使える手法です。
ユーザーの注意を引く
See the Pen backdrop-filter sample 4 by YUTSUZO (@YUTSUZO) on CodePen.
モーダルウィンドウの表示時に背景にぼかしを入れることで、ウィンドウの内容が視覚的に強調され、ユーザーの注意を引きやすくなります。また、ぼかしによって奥行きが生まれ、デザインに立体感や洗練された印象を与えることができます。
縦横比が異なる画像の背景の余白を埋める
See the Pen backdrop-filter sample 5 by YUTSUZO (@YUTSUZO) on CodePen.
テレビ番組などで、スマホで撮影された縦長の動画や画像を映し出す際によく使われる手法です。
縦横比の違いによって余白ができる場合、同じ絵をぼかしたものを背景いっぱいに広げることで余白を埋め、統一感を出すことができます。縦長と横長の画像が混在するフォトギャラリーなどで使える手法です。
終わりに
以上、backdrop-filterによるぼかしの方法と、ぼかしを使用したいくつかのアイデアをご紹介しました。紹介したシーン以外にも、さまざまなシーンで活躍できるかと思います。ぜひ、ご自身のウェブサイトに取り入れて活用してみてください。