このサイトのナビやカードには、後ろの星空や草原が透けて見える「すりガラス」のような質感があります。画像素材は一切使わず、backdrop-filter の数値だけで作っています。

blur だけだと「曇りガラス」で止まる

.nav {
  backdrop-filter: blur(8px);
}

blur 単体でも背景をぼかす効果は出ますが、色が沈んで見えることが多く、ガラスというより磨りガラスの手前で止まった印象になります。そこで saturate を足すことで、透けて見える背景の色味を持ち上げています。

.modal-like {
  backdrop-filter: blur(16px) saturate(1.2);
}

彩度を1.2倍にすると、ぼかしで失われがちな鮮やかさが補われ、「単に薄いベールがかかっている」のではなく「ガラス越しに景色が透けている」ように見えます。この掛け合わせに気づいてから、単純な blur だけの箇所を見直して回りました。

用途別に3段階だけに絞る

このサイトでは backdrop-filter の数値を、8px（軽め）・14px（中間）・16px+彩度（強め）の3段階だけに絞っています。

  • 8px: 常に画面に居続けるナビなど、視線の主役ではない要素
  • 14px: カードなど、情報量はあるが画面を占有しない要素
  • 16px + saturate(1.2): 一時的に前面に出る、モーダル的な要素

数値のバリエーションを増やしすぎると、「なぜここは12pxでここは15pxなのか」を後から説明できなくなります。「情報の重要度・画面占有度が高いほど強くぼかす」という一貫した基準を先に決め、値を離散的な3段階に固定したことで、後から見返したときの一貫性を保てています。

パフォーマンスは「重ねすぎない」で守る

backdrop-filter はGPU負荷が比較的高いプロパティです。このサイトでは星空・浮遊装飾・グラデーションの空という複数のレイヤーが常に背景で動いているため、backdrop-filter を持つ要素を画面内に大量に配置すると、スクロール時のフレームレートに影響が出ます。そのため、常時表示される要素（ナビ）以外は、カードのホバー時など「一時的にしか有効にならない」使い方に限定し、同時に効いている backdrop-filter の枚数を抑える設計にしています。

質感の作り込みは、数値をいじり倒すことより先に「どこまで使う範囲を絞るか」を決めることの方が、最終的な仕上がりと軽さの両方を左右すると感じました。