グラスモーフィズムCSSジェネレーター

backdrop-filterのぼかしと彩度、ティントカラーと不透明度、枠線、影を使ったすりガラス風のCSSを生成します。Safari向けの-webkit-プレフィックスも出力します。

プリセット

ガラス設定

ぼかしpx

背景の彩度%

ティントカラー

ティントの不透明度

枠線の不透明度

半径px

ドロップシャドウ

プレビュー設定

背景

プレビュー

すりガラス

背景がぼやけて透けて見えます。

CSS コード

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

グラスモーフィズムジェネレーターとは？

すりガラス（グラスモーフィズム）効果を作ります。背後にあるものをぼかし、彩度を高める半透明の色付きパネルで、任意で淡い枠線とやわらかな影を付けられます。プレビューでは、カラフルな背景の上にカードが置かれるため、効果を判断できます。

グラスモーフィズムジェネレーターの使い方

プリセット（すりガラス風、ダークガラス、カラーガラス、控えめ）を選びます。
ぼかしと背景の彩度を調整します。
ティントカラーとティントの不透明度、枠線の不透明度、半径を選びます。
ドロップシャドウを切り替え、プレビュー設定でさまざまな背景を試します。
CSSコードをコピーします。

例

入力

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

出力

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

グラスモーフィズムジェネレーターを使うべき場面

画像やカラフルなグラデーションの上に置くカード、ナビゲーションバー、モーダルに使います。効果が現れるのは、要素の背後に見えるものがある場合だけで、単色の上では普通の半透明のボックスに見えます。ガラスの背後の背景は変化するため、文字のコントラストを確認してください。

グラスモーフィズムジェネレーターの仕組み

パネルの背景は、選んだ不透明度（rgba()）のティントカラーで、枠線は枠線の不透明度で同じ色を使います。ぼかしと彩度は backdrop-filter: blur(px) saturate(%) に入ります。saturate(100%)は何も変えないため省略されます。宣言は2回書かれ、先にSafariがまだ必要とする -webkit- プレフィックス付き、次にプレフィックスなしです。ぼかしが0で彩度が100%なら、backdrop-filterはまったく書かれません。