グラスモーフィズム生成（Glassmorphism）｜無料Webツール集
backdrop-filterを使った美しい「すりガラス」効果を、直感的なスライダーで自由にデザイン。リアルタイムプレビューで理想の質感を見つけて、CSS / Tailwindコードをコピーできます。
- 各スライダーでぼかし・透明度・枠線・影・角丸を調整
- 背景パターンを切り替えて実際の見た目を確認
- 好みの効果が出たらCSSまたはTailwindクラスをコピー
Glassmorphism Settings
Glassmorphism
このカードはリアルタイムで変化します
Generated Code
コピーしました！
グラスモーフィズム（Glassmorphism）とは？
グラスモーフィズムは、すりガラスのような透明感とぼかし効果で奥行きと浮遊感を表現する人気のUIデザイン手法です。主に backdrop-filter: blur() と半透明の背景、細いボーダー、柔らかい影を組み合わせることで実現します。
ポイント（2025-2026のトレンド）
・ぼかしは強すぎず（8〜20px程度）が自然
・透明度は低め（0.1〜0.25）で背景が透けるのが美しい
・影を軽く入れると「浮いている」感覚が増す
・Safari対応のため
・ぼかしは強すぎず（8〜20px程度）が自然
・透明度は低め（0.1〜0.25）で背景が透けるのが美しい
・影を軽く入れると「浮いている」感覚が増す
・Safari対応のため
-webkit-backdrop-filter を併記推奨
本ツールで生成したコードは、カード・ナビゲーション・モーダルなどさまざまな場面でそのまま使えます。Tailwind CSSユーザーにも対応しています。
