backdrop-filter 背後の背景をぼかす
Developer Design Utility
Glassmorphism ジェネレーター
透明度、backdrop blur、ボーダー、radius、シャドウを調整し、ガラスのような質感の Glassmorphism CSS をリアルタイムプレビュー付きで作成できます。
Glass UI 作成
半透明背景と blur 効果を組み合わせてガラス風 UI カードを作成できます。
リアルタイムプレビュー
Opacity、Blur、Border、Radius、Shadow の値が即座にプレビューへ反映されます。
CSS コードコピー
完成した Glassmorphism CSS をコピーしたり CSS ファイルとしてダウンロードできます。
Blur
18px
Opacity
22%
Border
34%
Radius
28px
STEP 1
Glassmorphism 設定
背景色、透明度、blur、saturation、ボーダー、シャドウを調整して理想のガラス効果を作成しましょう。
ガラスカードの基本背景色です。白は定番の Glass UI、カラーはアクセントカードに適しています。
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
Live Preview
Glass UI
Glassmorphism Card
透明なガラス質感と blur 効果をリアルタイムで確認できます。
Blur
18px
Opacity
22%
Radius
28px
STEP 2
おすすめプリセット
カード、バナー、モーダル、ダーク背景 UI によく使われる Glassmorphism スタイルを素早く適用できます。
基本 Glass UI
カラー Glass UI
特殊スタイル
STEP 3
待機中
生成結果
以下のコードは CSS ファイル、コンポーネントスタイル、またはインラインスタイルで使用できます。
設定を選択し、「CSS コード生成」ボタンを押してください。
ヘルプ
Glassmorphism とは？
Glassmorphism は半透明背景、blur、繊細なボーダーとシャドウを組み合わせてガラスのような質感を表現する UI スタイルです。カード、モーダル、バナー、ダッシュボード、プロフィールボックスなどでよく利用されます。
使い方
- Glass Color、Background Opacity、Backdrop Blur、Saturationを調整します。
- Border Opacity、Radius、Shadow、Paddingでカードの奥行きと形を整えます。
- プレビュー背景上でガラス質感とテキストの読みやすさを確認します。
- CSSコードを生成し、結果をコピーするかCSSファイルとして保存します。
ガラス効果が目立たない場合は？
背景にグラデーションや画像など色の変化がある要素を配置すると blur 効果が強調されます。Blur 値や Border Opacity を上げるのも有効です。
文字が読みにくい場合は？
Background Opacity を上げるか、文字色をより濃くしてください。透明度が高すぎるガラスカードは見た目は美しいですが、実際の UI では可読性が低下することがあります。
backdrop-filter はすべてのブラウザで動作しますか？
最新ブラウザの多くでサポートされていますが、一部環境では制限があります。そのため -webkit-backdrop-filter を併記することを推奨します。