ブラウザだけで利用できる！無料ツール：グラスモーフィズム生成（Glassmorphism）

backdrop-filterを使った美しい「すりガラス」効果を、直感的なスライダーで自由にデザイン。リアルタイムプレビューで理想の質感を見つけて、CSS / Tailwindコードをコピーできます。

Blur（ぼかし）12px

Transparency（透明度）0.15

Border Opacity0.25

Shadow Intensity0.25

Border Radius16px

Glass Base Color

Background Style

このカードはリアルタイムで変化します

グラスモーフィズムは、すりガラスのような透明感とぼかし効果で奥行きと浮遊感を表現する人気のUIデザイン手法です。主に backdrop-filter: blur() と半透明の背景、細いボーダー、柔らかい影を組み合わせることで実現します。

ポイント（2025-2026のトレンド）
・ぼかしは強すぎず（8〜20px程度）が自然
・透明度は低め（0.1〜0.25）で背景が透けるのが美しい
・影を軽く入れると「浮いている」感覚が増す
・Safari対応のため -webkit-backdrop-filter を併記推奨

本ツールで生成したコードは、カード・ナビゲーション・モーダルなどさまざまな場面でそのまま使えます。Tailwind CSSユーザーにも対応しています。

グラスモーフィズム生成