Developer Design Utility
Glassmorphism ジェネレーター
透明度、backdrop blur、ボーダー、radius、シャドウを調整し、ガラスのような質感の Glassmorphism CSS をリアルタイムプレビュー付きで作成できます。
Glassmorphism 設定
背景色、透明度、blur、saturation、ボーダー、シャドウを調整して理想のガラス効果を作成しましょう。
ガラスカードの基本背景色です。白は定番の Glass UI、カラーはアクセントカードに適しています。
透明なガラス質感と blur 効果をリアルタイムで確認できます。
おすすめプリセット
カード、バナー、モーダル、ダーク背景 UI によく使われる Glassmorphism スタイルを素早く適用できます。
基本 Glass UI
カラー Glass UI
特殊スタイル
生成結果
以下のコードは CSS ファイル、コンポーネントスタイル、またはインラインスタイルで使用できます。
設定を選択し、「CSS コード生成」ボタンを押してください。
ヘルプ
Glassmorphism とは？
Glassmorphism は半透明背景、blur、繊細なボーダーとシャドウを組み合わせてガラスのような質感を表現する UI スタイルです。カード、モーダル、バナー、ダッシュボード、プロフィールボックスなどでよく利用されます。
主要 CSS プロパティ
background: 半透明背景色backdrop-filter: 背後の背景をぼかすborder: ガラスの縁を表現box-shadow: 奥行きとレイヤー感を追加
推奨設定
- 一般的な Glass カード: Opacity 16%〜28%、Blur 14px〜24px
- Frosted Glass: Opacity 8%〜16%、Blur 24px 以上
- ダーク背景カード: Opacity 20%〜35%、Border Opacity 15%〜30%
- カラー Glass: アクセントカラーと低透明度の組み合わせ
注意事項
Glassmorphism は単色背景よりもグラデーション、画像、パターン背景の上でより効果的です。ただしテキストの可読性を保つため、透明度を下げすぎないようにしましょう。
ガラス効果が目立たない場合は？
背景にグラデーションや画像など色の変化がある要素を配置すると blur 効果が強調されます。Blur 値や Border Opacity を上げるのも有効です。
文字が読みにくい場合は？
Background Opacity を上げるか、文字色をより濃くしてください。透明度が高すぎるガラスカードは見た目は美しいですが、実際の UI では可読性が低下することがあります。
backdrop-filter はすべてのブラウザで動作しますか？
最新ブラウザの多くでサポートされていますが、一部環境では制限があります。そのため -webkit-backdrop-filter を併記することを推奨します。