EXP. 08 — GLASSMORPHISM
すりガラスとシェイプ
背景で色のかたまりがゆっくり動き、ガラス越しににじんで見えます。
スクロールするとシェイプが流れていくのを感じてください。
スクロールで背景のシェイプが動きます
「ぼかしの強さ」で世界が変わる
同じガラスでも backdrop-filter: blur() の値だけで印象が大きく変わります。
BLUR 6PX
薄いガラス
背景の形がはっきり見える。動きを見せたいヒーローやカルーセルの上に。
BLUR 22PX
標準のすりガラス
iOS風の定番バランス。ナビゲーションバーやカードUIに一番使いやすい。
BLUR 48PX
深い霧
色だけがオーロラのように残る。読ませたい文章の背景に最適。
ぼかしを自分で調整
スライダーでこのパネルの backdrop-filter が変わります
blur
24px