ライブプレビューで glass と neumorphism の CSS サーフェスをデザイン。
最終更新
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*glassmorphism* と *neumorphism* は、現代のウェブデザインのいたるところで目にする 2 つのサーフェススタイルです。**ガラス**はフロストガラスの見た目 — 背後をぼかす半透明カードで、よくカラフルなグラデーションや写真の上に重ねる。**neumorphism**は柔らかいプラスチックの見た目 — 背景と同じ色相の明暗ペア影で、表面から押し出される（あるいは沈む）ように見えるカード。
両者とも純粋な CSS — 画像も JavaScript もライブラリも不要。ガラスは backdrop-filter: blur() と半透明の塗り、薄いボーダーに依存。neumorphism は 2 つの box-shadow から組み立てる：表面より少し暗いものと少し明るいものを反対方向にオフセット。式は短いが、すべてが収まるまで手で値を調整するには時間がかかる。ジェネレーターはこのステップをスキップしてくれます。
本ツールは、重要な各パラメータのスライダー、ガラスの屈折対象としての設定可能な背景を持つプレビュー、そしてワンクリック CSS コピーを提供。すべてブラウザ内で完結 — スニペットをそのまま CSS に貼り付け。
backdrop-filter が glassmorphism を成立させるプロパティ — 要素自身ではなく、要素の*背後*をぼかし、彩度を上げる。rgba(...)）と細い明色ボーダーが必要。どちらかを取ると効果が崩れる。box-shadow を **2 つ** 使う：右下に暗い影、左上に明るいハイライト、どちらも純黒/純白ではなく表面色のトーン。上部で **ガラス** と **Neumorphism** を切り替え。ガラスには背景が必要、neumorphism はあなたが指定するフラットな表面色の上に乗る。
ガラスでは *blur*（背景がどれだけ広がるか）、*背景の不透明度*（カードの透け感）、*tint*（わずかな色味）が主軸。neumorphism では *距離*（影のオフセット量）、*blur*（柔らかさ）、*強度*（明暗が表面からどれだけ離れるか）が主軸。
ガラスは鮮やかなグラデーションや写真で最もよく映える。neumorphism は柔らかい中間色（#e0e5ec が定番の neumorphic グレー）で映える。クリック可能なプリセットを用意。
3 種類：**Raised**（押し出し）、**Flat**（グラデーションなしの同じ影）、**Inset**（押し込み）。3 種類とも試して — 影の式は同じで方向だけ変わる。
**コピー** をクリックしてスニペットを CSS に貼る。出力は本番対応：古い Safari 向けの -webkit-backdrop-filter、整列したプロパティ、対応する border-radius で 1 クラスとして動く。
各効果が実際に依存するプロパティ。フルリファレンスは MDN — backdrop-filter と box-shadow。
| スタイル | 中心プロパティ | 調整対象 | メモ |
|---|---|---|---|
| ガラス | backdrop-filter、半透明 background、細い border | Blur、彩度、アルファ | Safari 互換性のため常に -webkit-backdrop-filter を併記 |
| Neumorphism（押し出し） | 2 つの box-shadow + 線形グラデーション | 距離、Blur、明暗強度 | 影色は純黒/純白ではなく表面の色相に従う |
| Neumorphism（inset） | 2 つの inset box-shadow | 押し出しと同じコントロール | inset は押されたボタンや沈んだ入力欄に見える |
| ハイブリッド | Neumorphic 板の上にガラス | 重ね方は慎重に — フィルター多用は性能を落とす | ダッシュボードで一般的：neumorphic カード＋ガラスヘッダー |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);古典的 glassmorphism。saturate(180%) でぼかしの背後に鮮やかさを足す — なければフロストガラスは色あせて見える。ヒーローグラデーションや写真の上に置こう。
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;2 つの影が仕事をする：右下に暗いもの、左上に明るいハイライト。グラデーション塗りが「プラスチック」と読まれる微妙な光沢を加える。
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;両方の影に inset を足すとカードは押し出しではなく沈み込んだように見える — 入力欄やトグルの背景に最適。
-webkit-backdrop-filter を忘れる。古い Safari（埋め込み WebView 含む）はプレフィックスなしの backdrop-filter を無視し、ガラスが単色のブロックになる。backdrop-filter に加えて -webkit-backdrop-filter プレフィックスが必要。本ジェネレーターは両方自動で出力。プレフィックスなしだと古い Safari や iOS WebView は不透明な background にフォールバックしてガラスが消える。aria-label を合わせ、目立たせる必要があるもの（エラー、メイン CTA）には使わない。backdrop-filter はすべての evergreen ブラウザで対応、box-shadow は普遍。ただし性能に注意 — backdrop-filter はフレーム単位の GPU 処理なので、同じ画面のガラス層数は少なく。