段階的にぼかす UI 表現 〜Web における Progressive Blur の実装と活用〜 - スプーキーズのちょっとTech。

こんにちは。ちゅるりです。 今回は、段階的にぼかしていく UI 表現の一例として Progressive Blur（プログレッシブ・ブラー）をご紹介しつつ、実装から実際のデザインへの組み込みまでを包括的に述べていこうと思います。 Progressive Blur とは 概要 タイトルなどでも既に述べてしまっていますが、ひと口で言えば「徐々にぼかし半径が変わっていくぼかし」です。ぼかしのグラデーションとも言えるでしょう。 百聞は一見にしかず、例をご覧いただけるとわかりやすいかと思います。次の図は、Progressive Blur を用いたカード実装の一例です。 Progressive Blur の一例（自サイト slides.itsu.dev より） このように Progressive Blur は 2 つ以上重なった要素の境界においてその真価を発揮します。例えば iOS18 のコントロール