タスクの道筋 / 入力から結果へ
グラスモーフィズムのパネルを作る方法
- 01
ガラスのティントを選ぶ
「ガラスのティント」で色を選びます。プレビューはパネルを 2 つのカラーオーブの上に浮かべるため、実際の画面と同じように、にぎやかな背景に対する素材感を判断できます。
- 02
不透明度とぼかしを設定する
「表面の不透明度」は 0.05〜0.8 で、低いほど透明になります。「背景ぼかし」は 0〜40 px で、パネルの背後にあるものをやわらかくぼかします。
- 03
彩度・ボーダー・角丸を調整する
「彩度」（50〜200%）は背景を鮮やかにも渋くもします。「ボーダーの不透明度」（0〜0.8）はティント色で縁をなぞり、「角丸半径」（0〜48 px）がパネルを丸めます。
- 04
素材のバランスを取る
サーフェス系のコントロールは互いにトレードオフです。不透明度が低いほど、ガラスに見せるにはぼかしが多く必要で、「彩度」を 100% より上にすると、淡いティント越しににぎやかな背景が色あせて見えるのを防げます。デフォルトの素材（白ティント、不透明度 0.22、ぼかし 18 px、彩度 140%）は実績のある中間点です。
- 05
パネル CSS をコピーする
「CSS をコピー」または「.css をダウンロード」で toolars-glass-panel.css を保存します。.glass-panel ルールは、rgba の背景、-webkit- の双子行付きの backdrop-filter、1 px のティントボーダー、やわらかな影を組み合わせたものです。
- 06
フォールバックを計画する
backdrop-filter が使えない環境でも、rgba の背景・枠線・影は表示されます。背景ぼかしをゼロにしても彩度フィルターが残る場合があるため、代替表示の厳密な再現にはなりません。対象ブラウザーで CSS を試し、文字のコントラストが足りなければ表面の不透明度を上げてください。