モダンUI CSSジェネレーター｜グラスモーフィズム対応

グラスモーフィズム（Glassmorphism）は、背景を半透明にしてぼかし効果（backdrop-filter: blur()）をかけることで、すりガラスのような質感を表現するUIデザイントレンドです。AppleのmacOS/iOSやWindows Fluent Design Systemで広く採用されています。

本ツールでは、12種類のプリセットからワンクリックで適用できるほか、blur・brightness・saturate・contrastの4つのbackdrop-filter関数を個別に調整可能です。ボーダー・シャドウ・角丸もスライダーで微調整し、CSSまたはCSS変数形式でコードをコピーできます。

backdrop-filter: blur()

要素の背後をぼかします。値が大きいほどすりガラス効果が強くなります。グラスモーフィズムの核となるプロパティです。

backdrop-filter: brightness()

背景の明るさを調整します。100%がデフォルト。200%で2倍明るく、0%で真っ暗になります。

backdrop-filter: saturate()

背景の彩度を調整します。100%がデフォルト。0%でモノクロ、200%で過飽和の鮮やかな色になります。

backdrop-filter: contrast()

背景のコントラストを調整します。100%がデフォルト。値を上げると明暗差が強調されます。

ベンダープレフィクス

Safari対応のため -webkit-backdrop-filter を併記するのが推奨です。本ツールの出力コードには自動で含まれます。

Q. backdrop-filterはすべてのブラウザで使えますか？

Chrome、Edge、Safari、Firefoxなど主要ブラウザの最新版で対応済みです。IE11は非対応ですが、半透明の背景色のみで最低限の見た目を維持するフォールバック設計が推奨されます。

Q. ニューモーフィズムとグラスモーフィズムの違いは？

グラスモーフィズムはbackdrop-filterを使って「すりガラス感」を出すスタイルで、要素の重なり（Z軸）を表現します。ニューモーフィズムはbox-shadowの明暗で「凹凸」を表現するスタイルです。

Q. パフォーマンスへの影響はありますか？

backdrop-filterはGPU合成を利用するため、適度な使用であれば問題ありません。ただし、ページ全体に高いblur値を適用するとフレームレートが低下する場合があります。

Q. 生成されたコードをそのまま使えますか？

はい。コピーしたCSSをスタイルシートに貼り付けるだけで適用できます。クラス名は任意に変更してください。