デザイントークン

html/template/glass/assets/css/style.css の先頭にあります。

変数役割
--g-accent-rgb / --g-accent-2-rgb / --g-accent-3-rgbアクセント 3 色（R, G, B の 3 値）。ここを変えるとボタン・バッジ・発光・背景オーロラまで連動します
--g-accent / --g-accent-2 / --g-accent-3上記から生成される色。直接書き換える必要はありません
--g-accent-inkリンクなど小さな文字用の、コントラストを確保した濃いアクセント
--g-accent-grad装飾用グラデーション（見出しの線・ドットなど、文字が乗らない面）
--g-btn-grad / --g-btn-grad-hvボタン用グラデーション。文字が乗るため明度を調整済み
--g-ink-onaccentボタンなどアクセント面に乗る文字色（白とは限りません）
--g-icon-onaccent-filterアクセント面に乗る SVG アイコンの反転フィルタ
--g-text-grad文字グラデーション（.ec-secHeading__en など）
--g-bg / --g-bg-2ページ背景のベース色
--g-ink / --g-ink-soft / --g-ink-mute文字色（強 / 標準 / 補助）
--g-price価格表示の色
--g-surface / --g-surface-2 / --g-surface-3ガラス面の透明度（薄い→濃い）
--g-panelメガメニューなど、リンクが密に並ぶ面
--g-surface-hiホバー／選択時のガラス面（ひとつ明るい）
--g-hairline-hiホバー／選択時の縁の光
--g-bed-opacity一覧の背面に敷く色の強さ（ライトの既定は 0＝無効）
--g-reveal-dur / --g-reveal-shiftスクロール表示の速さ（既定 1s）と移動距離（22px）
--g-float / --g-float-2ページの任意の内容の上に浮く面（ヘッダー・カートパネル・ドロワー・モーダル）。背面に商品写真が来ても文字が読めるよう、他のガラス面と別に持っています
--g-border / --g-lineガラスの縁 / 区切り線
--g-head-glass浮いているヘッダーの面。既定はメガメニューと同じ（--g-mega-bg）。ガラスにしていません（理由は 「ヘッダー」の

「ヘッダーをガラスにしていない理由」） | | --g-hairline | ガラスの縁の光。外周リングと、上→左→右→下と弱くなる内側のハイライト。全てのガラス面の box-shadow に入っています | | --g-hairline-ring / --g-edge-grad | 横に広いガラス面（ヘッダー・メガメニュー・ヒーロー・フッター・モーダル）の斜めのグラデーション縁 | | --g-edge-glow / --g-edge-bloom | 縁から内側へ滲む光と、外側へのわずかな滲み | | --g-blur / --g-blur-lg / --g-sat | ぼかし量・彩度強調 | | --g-shadow-1〜3 / --g-glow | 影とアクセントの発光 | | --g-r-xs〜xl / --g-r-pill | 角丸 | | --g-container / --g-container-wide | コンテンツ幅（既定 1130px / 1400px） | | --g-aurora-1〜3 / --g-aurora-opacity | 背景オーロラの色と濃さ（ライトの既定は 0＝無効） |

--g-icon-filterダークモード時のアイコン反転

ライトのページはまっ白です

ライトの既定では、ページの地に何も敷いていません。四隅の色の塊（オーロラ）も、一覧の背面の色（.g-bed）も既定は 0 です。画像の上にある面だけをガラスにして、白い地の上の面は白い紙のままにする、という切り分けに合わせています。

ダークは白い紙という前提が無いので、どちらも残してあります。

背景に色を戻したい

:root {
  --g-aurora-opacity: .32;   /* 四隅の色の塊 */
  --g-bed-opacity:    .38;   /* 一覧の背面に敷く色 */
}

色そのものの濃さ（--g-aurora-1〜3）は、色ごとに変えてあります。同じ不透明度で重ねても、背景に対してどれだけ彩度が立つかは色によって違うためです。そのまま同じ濃さで重ねるとシアンが背景の約 8 倍の彩度になり、商品よりも背景の色に目が行ってしまいます。どの色も合成後の彩度が背景の 3 倍程度に収まる値にしてあるので、--g-aurora-opacity の 1 つで全体を上げ下げできます。

地の色そのものを変えたい

:root { --g-bg: #f5f6fa; --g-bg-2: #f5f6fa; }

ヘッダーはいちばん上で --g-bg に塗るので、ここを変えると一緒に付いてきます。

縁の強さを変える

ガラスらしさは、面の透明度よりも 縁の出かた で決まります。--g-hairline は全てのガラス面の box-shadow に入っているので、ここを書き換えるとヘッダー・カード・パネル・フォームまで一度に変わります。

:root {
  --g-hairline:
    0 0 0 1px rgba(28, 30, 64, .05),          /* 外周：明るい背景でも輪郭が出る */
    inset 0 1px 0 rgba(255, 255, 255, .92),   /* 上：いちばん強い光 */
    inset 1px 0 0 rgba(255, 255, 255, .55),   /* 左 */
    inset -1px 0 0 rgba(255, 255, 255, .22),  /* 右 */
    inset 0 -1px 0 rgba(255, 255, 255, .12);  /* 下 */
}

上を強く・下を弱くすることで、左上から光が当たったガラスの厚みに見えます。数値を一律にすると、ただの白い枠線になります。

横に広い面（ヘッダー・メガメニュー・ヒーローのカード・フッター・モーダル）は、これとは別に 斜めのグラデーション縁 を使っています。左上がいちばん明るく、右下でわずかに戻る 1px のリングです。

:root {
  --g-edge-grad: linear-gradient(115deg,
    rgba(255,255,255,1)   0%,     /* 左上：いちばん明るい */
    rgba(255,255,255,.62) 18%,
    rgba(255,255,255,.14) 46%,
    rgba(255,255,255,.08) 66%,
    rgba(255,255,255,.58) 100%);  /* 右下：わずかに戻る */
}

商品カードのように縦長で細い面には付けていません。斜めの向きが知覚できず、要素の数だけ層が増えるだけだったためです（実測して確認しています）。他の面に付けたい場合は g-edge クラスを追加してください。

リングは内側を抜いたマスクで作っています（border-image は角丸に追従しないため）。mask-composite に未対応のブラウザでは、従来の一様なハイライトに自動で戻ります。

縁が光って見える理由

「光っている」印象を作っているのは 1px の線ではなく、そこから 内側へ滲む光 です。ぼかし付きの inset を負のスプレッドで使い、縁から数 px だけ光らせています。

:root {
  --g-edge-glow:
    inset 0 10px 16px -12px rgba(255,255,255,1),     /* 上から */
    inset 10px 0 18px -14px rgba(255,255,255,.85),   /* 左から */
    inset -10px 0 18px -16px rgba(255,255,255,.50);  /* 右から（弱め） */
  --g-edge-bloom: 0 0 14px -3px rgba(255,255,255,.55);  /* 外側へのわずかな滲み */
}

ダークモードは光の到達距離を短くしてあります。明るい文字が乗るため、光が文字の下まで届くと読みにくくなるからです。カードの余白は 12px で、光は縁から 4〜6px に収まります（実測して確認しています）。

光を消したい場合は、無効な値ではなく 透明な影 をご入力ください。 none にすると box-shadow 全体が無効になります。

:root { --g-edge-glow: 0 0 0 0 transparent; --g-edge-bloom: 0 0 0 0 transparent; }

一覧の背面に敷いている色

すりガラスは「背面に何かある」ときだけガラスに見えます。商品一覧のようにカードが並ぶ場所は背面がほぼ無地なので、カードの裏に大きく柔らかい色の塊を敷いています（.g-bed）。カードごとに違う色が透けるため、写真を用意しなくてもガラスらしく見えます。

対象は商品一覧・お気に入り一覧・新着商品ブロックです。強さは 1 行で変えられます。

:root { --g-bed-opacity: .6; }   /* 0 で無効 */

ダークモードは既定で .35 に抑えています。明るい色を背面に敷くと、明るい文字のコントラストが下がるためです（ライトは文字が濃いので影響が小さい）。 .4 以上にすると、AA を満たさない組み合わせが出ます（実測で確認しています）。

敷いている色そのものの濃さは、色ごとに変えてあります。同じ不透明度で重ねても、背景に対してどれだけ彩度が立つかは色によって違うためです。既定の配色では、そのまま同じ濃さで重ねるとシアンが背景の約 6 倍の彩度になり、商品よりも下地の色に目が行ってしまいます。どの色も合成後の彩度が背景の 2 倍程度に収まる値にしてあります。

他の場所にも敷きたい場合は、対象の要素に g-bed クラスを付けてください。ページ全体の背景（オーロラ）はビューポート固定で四隅にあるため、画面中央に来る一覧には効きません。こちらは要素に付き、縦に長い一覧でも色が続きます。

色は一覧の範囲の中だけに置き、外へは表示しません（上下左右に回り込むとくどくなるため）。四辺はマスクでぼかしてあるので、縁も角も表示されません。ぼかす幅は要素の大きさにも追従するので、スマートフォンのように一覧が狭い場面でも下地が消えません。

ホバー時のガラス

商品カード・カテゴリナビ・メガメニューのリンク・マイページのナビは、ホバーするとガラスがひとつ明るくなり、縁の光が強まります。

:root {
  --g-surface-hi: rgba(255,255,255,.72);   /* ホバー時の面 */
  /* --g-hairline-hi は --g-hairline と同じ書式（外周＋内側 4 辺） */
}

opacity は動かしていません。すりガラス面の opacity が 1 未満の間はぼかす前の背面がそのまま透けてしまい、ちらついて見えるためです。

ガラス感をもっと強く / 弱く

面をより透明にしても、背面にあるものがガラスと同じ明るさだと見た目は変わりません。商品一覧のようにカードが並ぶ場所では、透明度より縁・影・背面の色のほうが効きます。

:root {
  --g-surface:  rgba(255,255,255,.42);  /* 小さいほど透ける */
  --g-blur:     26px;
  --g-blur-lg:  40px;
}

関連記事