グラスモーフィズムCSSジェネレーター — すりガラス
ブラー・透明度・彩度・ボーダー・角丸のスライダーで、すりガラス風(グラスモーフィズム)のカードを作成。ライブプレビューとCSS。ブラウザ内で完結。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
このツールについて
このグラスモーフィズム・ジェネレーターは、最近のアプリやWebデザインで見かけるすりガラス風の見た目を作り、コピーできるCSSを渡してくれます。ぼかし・透明度・背景の色味・枠線・角丸を調整すると、ライブパネルがカラフルな背景の上に浮かぶ効果を表示するので、読みやすさを確認できます。内部的には、要素の背後にあるものをぼかすためにbackdrop-filterを利用しています。パネルが良い感じになったら、生成されたルールをスタイルシートにコピーしてください。すべてブラウザ内で動作します。
よくある質問
すりガラス効果は実際どのように実現されているのですか?
この効果は3つの要素を重ねています。背景の色が少し透けて見える半透明の背景、パネルの背後にあるものをすりガラス状にぼかすbackdrop-filterのぼかし、そして本物のガラスのように縁を際立たせる繊細で明るい枠線です。鍵となるのはぼかしで、パネル自身の文字ではなく、その下にあるコンテンツをやわらげます。効果は背後にあるものを取り込むため、グラスモーフィズムは無地よりも、カラフルな背景や写真の上に浮かべたときに最も映えます。
backdrop-filterはすべてのブラウザで動作しますか?
backdrop-filterは主要なブラウザの現行バージョンでサポートされていますが、いくつか注意点があります。Safariでは-webkit-backdrop-filterという接頭辞が必要で、これはジェネレーターが自動で含めます。また一部の古いブラウザはこのプロパティを完全に無視し、その場合パネルはぼかしのない素の半透明背景だけを表示します。強いぼかしは低スペック端末で動作が重くなることもあります。すりガラスが描画されなくても文字が読めるようにしておくと、デザインが無理なく劣化して安心です。
生成されたCSSはそのまま使えますか?ツールはローカルで動作しますか?
どちらもはい、です。背景・ぼかし・枠線・角丸を含む完全なルール一式が出力され、-webkit-接頭辞も付いています。そのままスタイルシートに貼り付けて、どんなパネルやカードにも適用できます。スライダーを調整するたびにすべてがブラウザ内でローカルに生成されるため、デザインや設定がアップロードされることはなく、ページを一度読み込めばオフラインでもプレビューが動作し続けます。