本文へスキップ
◇

グラスモーフィズム生成

すりガラス風カードのCSSを設計。

glass12px · 25%
#ffffff
ぼかし12px
不透明度25%
彩度180%
枠線1px
枠の不透明度35%
角丸16px
影 Y8px
影ぼかし32px
影の不透明度25%
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.25);
border-radius: 16px;

すりガラス効果は backdrop-filter で背景をぼかします。親要素に半透明以外の背景や overflow: hidden があると効果が弱くなることがあります。Safari 向けに -webkit-backdrop-filter も出力しています。

グラスモーフィズム生成について

グラスモーフィズムジェネレーターは、半透明の背景にbackdrop-filterのぼかしを重ね、枠線とドロップシャドウでカードの奥行きを作るCSSを視覚的に設計するツールです。 toco.toolsではカラフルな背景上のライブプレビューで効果を確認しながら、塗り色・不透明度・ぼかし・彩度・枠線・影・角丸をスライダーで調整し、完成したCSS（-webkit-backdrop-filter付き）をコピーできます。 親要素が不透明だったりoverflow: hiddenの場合、効果が弱くなることがあります。過度なぼかしは描画コストに影響するため、必要最小限にしてください。

使い方

  1. プリセットを選ぶかパラメータを調整
  2. プレビューですりガラス感を確認
  3. CSSをコピー

よくある質問（FAQ）

グラスモーフィズムとは何ですか？

半透明の背景にbackdrop-filterで背景をぼかし、すりガラスのように見せるUIスタイルです。

プレビューでぼかしが見えないときは？

backdrop-filterは背後の内容をぼかします。親が不透明、または背後に何もないと効果が分かりにくくなります。

設定は外部に送られますか？

いいえ。すべてブラウザ内で処理されます。

Safariでも使えますか？

はい。出力に -webkit-backdrop-filter を含めているので Safari でも同じ効果が得られます。