wabisabiのヘッダーで使われてるブラー

wabisabiのヘッダーでは、上に行くほど強いブラーがかかるヘッダーを採用しています。単純にグラスモーフィズムのような一様なものではなく、作るのに少し苦労したのでメモします。

Blurの配置

まず、blurの値をliner-gradientで変化させるようなことはできません。

/* こういうことがやりたい… が、できない */
backdrop-filter: blur(linear-gradient(20px, 0px));

なので、複数枚のblurを重ね、mask-imageで表示部分をずらしながら、背景色で覆ってそれっぽいのを再現しています。

まず、blurを最初のぼかしから1/2ずつしてそれぞれ全体に覆わせます。

/* L2の場合 */
backdrop-filter: blur(calc(var(--blur-base) / 2));

--blur-baseは20から始まって、レイヤーごとに1, 2, 4, 8と二の累乗で割られていきます。

Blurの重ね方

次にmask-imageとlinear-gradient()を使って、各レイヤーを上から有効化するようにします。

/* L8の場合 */
mask-image: linear-gradient(var(--pb-dir), transparent 75%, #000 87.5%, #000 100%);

--pb-dirはブラーの方向で、上に置く場合はto bottomです。

それぞれのレイヤーを高さを決めて上から連ねるのも考えましたが、多少重ねて、かつ各レイヤーの上端と下端はフェードしたら、境界が思ったより自然になったのでそちらを採用しました。

背景と馴染ませる

最後に、背景色のフェードを上から重ねて、ただのぼやけたものが上に残らず、自然に消えていくようにします。

.progressive-blur-tint { 
background: linear-gradient(var(--pb-dir), color-mix(in srgb, var(--background) 92%, transparent) 0%, color-mix(in srgb, var(--background) 60%, transparent) 40%, transparent 100%); }

color-mix()で背景色について透明度を出したものを、liner-gradient()で傾斜をつけてフェードさせるようにしています。

終わりに

Blurはおしゃれでいいんですけど、やっぱインタラクション要素が見づらいかなと思い、文字を太くするなり黒のオーバーレイを入れるとか、考えようによってはもっといいものが作れると思います。

このヘッダーをもっと楽に作れる人がいれば教えてください。