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

ぼかし(blur)・背景の透明度・彩度・境界線をスライダーで調整し、いま流行の半透明ガラス質感(グラスモーフィズム)のUIを作成します。カラー背景の上に重ねたリアルタイムプレビューを見ながら値を合わせ、そのまま貼り付けられるCSSをコピーできます。

使い方

1. ぼかし・背景の透明度・彩度・角丸・境界線のスライダーを動かして、好みのガラス質感を作ります。
2. ガラスの色とプレビュー用の背景色をカラーピッカーで調整します。
3. カラー背景の上のプレビューで、ガラス効果がきれいに見えるか確認します。
4. 完成したCSSを「CSSをコピー」で取り込み、好きな要素に貼り付けます。

よくある質問

backdrop-filterが適用されません。

backdrop-filterは要素の「背後」に背景(別の色や画像)があって初めてぼかし効果が見えます。背景のない白い画面の上ではほとんど変化がありません。Safari対応のため-webkit-backdrop-filterも併せて入れてあります。

プレビューの紫色の背景も一緒にコピーされますか?

いいえ。背景色はガラス効果の確認を助けるプレビュー専用で、コピーされるCSSにはガラス要素のスタイルのみが含まれます。

すべてのブラウザで同じに見えますか?

最新のChrome・Edge・Safari・Firefoxではよく動作しますが、backdrop-filterの対応状況やレンダリングはブラウザ・端末ごとに少しずつ異なる場合があるため、参考として確認のうえ適用してください。すべての計算はサーバー送信なしにブラウザ内だけで処理されます。