グラスモーフィズムCSS生成器 — ガラス風UIを作成

グラスモーフィズムは半透明の要素とbackdrop blurエフェクトを持つ人気のデザインスタイルです。生成器はグラスモーフィズム効果の完全なCSSコードを出力します。

グラスモーフィズムの技術

background: rgba(255,255,255,0.1)で半透明に。backdrop-filter: blur(10px)で背景のぼかし効果。border: 1px solid rgba(255,255,255,0.2)で淡い境界線。box-shadowで深みを追加。4つすべてがガラス効果を作り出します。

グラスモーフィズムの要件

カラフルな背景が必要——白い背景では見栄えがしません。グラデーションや画像を背景として使用します。backdrop-filterのブラウザサポートは94%以上ですが、SafariにはWebkitプレフィックスが必要です。

アクセシビリティ

半透明要素上のテキストコントラストを確認——下にあるコンテンツによって可読性が変わります。backdrop-filterのないブラウザ向けにフォールバック背景色を追加してください。