玻璃擬態設計系統 — 多彩漸層底、半透明玻璃卡片、柔霧景深
Glassmorphism · Soft Gradient Mesh · Floating Panels
玻璃卡片永遠半透明,讓背景的柔霧漸層透出來。連結是天霧紫色,hover 會加深並加上底線,維持在半透明背景上依然清晰可讀。
Primary 為漸層實色膠囊按鈕;Secondary 為玻璃底;Hover 一律 translateY(-2px) + 陰影加深
四色 radial-gradient 疊加,讓每片玻璃背後都有色彩可以穿透,是整個系統成立的前提。
backdrop-filter: blur(16px) 搭配低透明度白底,hover 時上浮並加深陰影,模擬玻璃被托起。
展示面板用最強的 blur(24px) + saturate(160%),背後四個模糊色塊製造景深與色彩暈染 — 這是系統模糊層級最深、最具代表性的一層。
色塊層 filter: blur(70px),opacity 0.5–0.6,置於玻璃面板之後(z-index: -1)
| 色彩 | Hex | 角色 |
|---|---|---|
| 天霧紫 Sky Lilac | #A78BFA | Primary — 主漸層、連結、主要按鈕 |
| 霧藺青 Aqua Mist | #5EEAD4 | Secondary — 次漸層、次要強調 |
| 蜜桃光 Peach Glow | #FDBA74 | 暖色漸層、標籤高光 |
| 薄霧粉 Blush Pink | #F9A8D4 | 徽章、裝飾色塊 |
| 玻光白 Glass White | #FFFFFF | Surface — 卡片玻璃面(低透明度) |
| 石墨灰 Ink Slate | #1E293B | 主文字色 |
| 雲灰 Cloud Gray | #64748B | 次要/輔助文字色 |