グラスモーフィズムジェネレーター
背景のぼかし・透明度・枠線を備えたすりガラス風UIカードを作成し、CSSをコピーできます。
プレビュー
グラスカード
鮮やかな背景に浮かぶすりガラス。
背景
CSS出力
—
backdrop-filter と -webkit-backdrop-filter の両方を出力します。注意: backdrop-filter は古いブラウザ（例: Firefox 103未満）では未対応です。その場合は不透明な代替背景を追加してください。
px
%
px
ガラスの塗り
20%
枠線
30%
品質プリセット
グラスモーフィズムジェネレーターについて
Glassmorphism Generatorは、背後にあるものをぼかす半透明パネルの「すりガラス」カード効果を作り出します。スライダーでbackdrop-filterのぼかしと彩度、ガラスの色合いとその透明度、ボーダーの色と不透明度、角丸、外側の影を制御でき、すべての変更が鮮やかな背景の上でリアルタイムに描画されるので、効果を現実的に判断できます。
subtle、frosted、vivid、dark glassという4つの品質プリセットは、そこから始められる実績のある組み合わせを提供します。darkプリセットは、同じレシピがダークUIにどう適応するかを示しており、かすかな明るいボーダーがガラスと背景を分ける役割の大半を担っています。
生成されるCSSにはbackdrop-filterと、Safariが必要とする-webkit-backdrop-filterプレフィックスの両方が含まれます。互換性についての注意点として、古いブラウザ(例えばFirefoxのバージョン103より前)はbackdrop-filterに対応していないため、それらのブラウザ向けに単色のフォールバック背景を用意してください。
グラスモーフィズムジェネレーターの使い方
- subtle、frosted、vivid、dark glassのいずれかのプリセット、またはデフォルトの状態から始めます。
- 背景フィルターのぼかしと彩度を調整します。
- ガラスの色合いとその透明度を設定します。
- ボーダーの色、ボーダーの不透明度、角丸、アウトラインの影を調整します。
- CSSをコピーします。Safari向けの-webkit-プレフィックス付きプロパティはすでに含まれています。
よくある質問
パネルには半透明の背景色が設定され、backdrop-filter: blur()が背後に表示されているものをぼかします。彩度を上げることでぼかされた色を鮮やかに保ち、かすかな半透明のボーダーがガラスの縁を演出します。
backdrop-filterには、要素への半透明の背景設定とブラウザの対応が必要です。Firefoxはバージョン103になってようやく対応しました。Safariには-webkit-backdrop-filterプレフィックスが必要ですが、生成されるCSSにはすでに含まれています。必ず単色のフォールバック背景を定義してください。
コントラスト管理です。最も背景が複雑な状態でもテキストがコントラスト基準を満たすまで、ぼかしを強めるか透明度を下げてください。またボーダーを追加することで、明るい領域でも暗い領域でもカードの縁がはっきり見えるようにします。
コンテンツが動くたびにブラウザが背景を再度ぼかす必要があるため、CSSの中でも比較的コストの高い効果の一つです。何十枚も重ねたカードではなく、少数の主要な面にだけ使い、ミドルレンジのモバイル端末でスクロールをテストしてください。
はい、完全に無料でブラウザ内で動作します。アカウント登録もアップロードも不要で、スライダーを調整してCSSをコピーできます。
人気の検索
グラスモーフィズム CSS ジェネレーター
CSS グラスモーフィズム ジェネレーター
すりガラス CSS エフェクト
backdrop-filter blur CSS
ガラス カード CSS ジェネレーター
CSS ガラス エフェクト 作成
グラスモーフィズム 背景 ジェネレーター
CSS ぼかし カード ジェネレーター
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。