玻璃拟态配方参考页

本页即 glassify SKILL.md 配方的活体参照：右上角切换亮色白玻璃与暗色高透玻璃两套主题，全部样式内联、零依赖，源码可直接抄走。暗色配方遵守铁律——fill alpha .12–.35、blur ≥ 24px、蚀刻边缘三件套、光泽折进 background。

亮色卡 blur(16px) saturate(1.5) 暗色卡 blur(24px) saturate(1.8) 暗色 fill 峰值 alpha .32 −webkit-backdrop-filter 必带

主卡片 / 面板 ✅

玻璃感最集中的载体

大容器上玻璃，透出背景光斑的色相与流动。注意本页背景：亮色黄蓝红光斑、暗色紫青光晕——玻璃后面必须有东西可虚化，否则看起来只是半透明色块。

border white .75 → .16
inset 高光 + 暗边 + 双层外投影

弹窗 / 顶栏 / 抽屉 ✅

顶部导航即本页顶栏配方：暗色下可比面板略实（alpha .30–.55），但必须仍能透光斑。弹窗、侧边栏、Toast 同理，浮层 + 透光 = 层次清晰。

顶栏 blur(24px) saturate(1.7)
border-bottom white .12

可读性红线 ⚠️

光泽已折进 background，不用 ::before 叠在文字上。正文对比度保持 WCAG AA；玻璃卡堆叠时透光正常，不出现全白全黑。按钮、输入框、标签、表格行一律保持实色，见下方样例。

文字色随明暗流派切换
44px 触摸目标不被装饰破坏

暗色玻璃最容易做成「糊一层深色块」。下面两块样品底下是同样的紫青光斑——左边 alpha .85 直接把光斑捂死，右边 alpha ≤.35 + blur 24 让色相透出来。配方失败 = 重做，不要交付。

❌ fill alpha .85 —— 实色块 光斑完全透不出来，玻璃等于一层深灰油漆。这是最常见的翻车形态：面板永远不许 ≥ .60。 background: rgba(20,20,28,.85) — 禁止

✅ fill alpha ≤.35 + blur 24 —— 高透玻璃 紫青光斑的色相透过玻璃可见，蚀刻边缘提供厚度感。渐变里的中性暗色可换项目主色，只换色相，不把 alpha 加回去。 blur(24px) saturate(1.8) · alpha 峰值 .32

内容可读性与点击辨识度优先——这些元素不上玻璃：

实色标签

大容器玻璃化、小交互元素保持实色，是两条成熟规律的合流：