グラスモーフィズム生成

グラスモーフィズム生成について

グラスモーフィズムは、backdrop-filter: blur() と半透明の背景、繊細な枠線を組み合わせてすりガラスを模倣する人気のUIデザイントレンドです。本ツールではライブコントロールで理想の見た目を微調整し、実用的なCSSを即座にコピーできます。

制御できるプロパティ

• 背景ぼかし — フロスト効果の強さ（0〜40px）。
• 背景透明度 — ガラス面の透明度。
• 枠線 — ハイライトエッジの太さと透明度。
• シャドウ — 奥行きを演出するbox-shadow。
• 形状と余白 — 角丸と内側のスペース。
• プレビュー背景 — 背景を切り替えてガラス効果を確認。

使い方

1. 背景ぼかし スライダーでフロスト強度を設定。
2. 背景透明度 で希望の透明感を調整。
3. 背景色と枠線の設定を選択。
4. box-shadow値を入力して奥行きを追加。
5. CSSをコピー をクリックしてスタイルシートに貼り付け。

よくある質問

backdrop-filter はすべてのブラウザで動作しますか？ すべてのモダンブラウザでサポートされています。Safari用に -webkit-backdrop-filter プレフィックスが自動的に含まれます。非常に古いブラウザではぼかしなしの半透明背景のみ表示されます。

単色背景でガラスが見えないのはなぜですか？ グラスモーフィズムはカラフルまたはテクスチャのある背景に依存します。画像、グラデーション、カラフルなセクションの上に配置してください。

全画面オーバーレイに使えますか？ はい — ぼかしと透明度を上げてモーダル背景に、下げてナビゲーションバーに使用できます。