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

ライブプレビューでガラス(グラスモーフィズム)効果をデザイン — ぼかし、透明度、色調、境界線を調整して、CSSをコピーしましょう。

669回閲覧

ぼかし: 8.9px

背景の不透明度: 0.22

境界線の不透明度: 0.3

角の半径: 16px

色調

プレビュー

ガラス効果

CSSコード

グラスモーフィズムとは?

グラスモーフィズムとは、すりガラスのような見た目のことです。backdrop-filter: blur()を使って背後にあるものをぼかす半透明のパネルに、控えめな境界線と影を組み合わせます。カラフルな背景や画像の上で最も効果を発揮します — 単色の背景ではぼかしが見えません。

スライダーを動かしてライブプレビューを確認してください。下のCSSは即座に更新され、コピーする準備が整います。Safari用の-webkit-backdrop-filterプレフィックスは、生成されたコードにすでに含まれています。

ガラス効果が平坦に見えるのはなぜですか?

backdrop-filterは変化のある背景の上でしか表示されません — 要素をグラデーションや画像の上に配置してください。ブラウザのサポートも確認しましょう:Safariには-webkit-プレフィックスが必要です(生成されたコードに含まれています)。

backdrop-filterはパフォーマンスに影響しますか?

ぼかしはGPUアクセラレーションされますが無料ではありません。数十個の要素ではなく、カードやヘッダーなどいくつかの主要な面で使用し、モバイルではぼかし半径を控えめにしてください。

クラシックなガラスの見た目にはどの値が良いですか?

良い出発点は次のとおりです:不透明度15〜25%の白背景、8〜12pxのぼかし、30%の白の1px境界線、16pxの半径 — これがこのジェネレーターの初期値です。