グラス / ニューモーフィズム

グラス / ニューモーフィズムに分類されるWeb表現技法7件。ガラスカード（backdrop-filter）、ニューモーフィックボタン、ニューモーフィックカード、フロストナビバーなど。ライブデモとコピーできるコード付き。

backdrop-filter で背景をぼかした半透明のガラスカード。マウスに追従する光沢で、料金プランや特集カードの主役に使えます。

背景と同色＋二方向シャドウで浮き沈みするニューモーフィズムのボタン群。押すと凹む立体感で、トグルやアイコン操作に向きます。

凹凸のパネルや進捗バーを組み合わせたニューモーフィズムのプロフィールカード。やわらかなダッシュボードUIに最適です。

スクロールするコンテンツの上で背後が透けるフロストガラスのナビバー。スクロール量に応じて濃さが変わり、ヘッダーに活用できます。

内外の二重シャドウでぷっくり膨らんだ粘土風カード。やわらかく親しみやすいUIやSNS系コンポーネントに向きます。

マウス位置に合わせて立体的に傾くガラス調のログインパネル。perspective と backdrop-filter を組み合わせた没入感のあるフォームです。

スライドトグルとセグメントスイッチを備えたニューモーフィズムの設定パネル。状態を文章で反映する設定UIのサンプルです。