任务路径 / 从输入到结果
如何搭建玻璃拟态面板
- 01
选择玻璃色调
用“玻璃色调”选色。预览会把面板悬浮在两个彩色圆球之上，让你像真实界面一样，在复杂背景上判断材质效果。
- 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 背景、边框和阴影仍会显示。将“背景模糊”设为零只能粗略观察后备效果，因为饱和度滤镜仍可能生效。请在目标浏览器测试；文字需要更多对比度时可提高“表面不透明度”。