玻璃拟态生成器
调节模糊、透明度与边框高光塑造磨砂玻璃卡片，输出 CSS 与 HTML。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传背景场景
玻璃卡片会模糊其背后的内容，背景越复杂效果越明显。
玻璃参数
实时预览
卡片背后为背景层，叠加明暗场景层，所见即所得预设库
点击任意预设即可载入（会保留当前文字与明暗场景），载入后可继续微调。
代码输出
历史记录
暂无历史记录。点击「保存当前样式」会记录在本地，可随时回放。
配置导出 / 导入
配置为本地生成的 JSON，包含全部玻璃参数与文字内容，不会上传。
工作原理
- 1预览使用真实 DOM 渲染：背景层铺满整块区域，明暗场景叠加层再叠一层半透明色，最上层的玻璃卡片依靠 backdrop-filter 让浏览器原生模糊其背后的内容，因此预览与复制出的代码效果一致。
- 2所有参数集中在一份可序列化的「玻璃配置」中，任意控件变化都会重新计算卡片样式并就地更新，同时把同一份配置序列化成 CSS 文本或完整 HTML 片段。
- 3卡片自身背景必须半透明（不透明度小于 100%）才看得到模糊；若调成完全不透明，界面会在提示区告知此时 backdrop-filter 无可见效果。
- 4输出的 CSS 同时包含 -webkit-backdrop-filter 前缀与 @supports not (backdrop-filter: blur(1px)) 降级块，在不支持的浏览器里改用较高不透明度的纯色，保证正文仍然可读。
- 5可读性检查先取背景的代表色，叠加明暗场景色，再把半透明玻璃合成到其上，最后与文字色计算 WCAG 对比度比率，避免只凭肉眼判断产生误判。
常见问题
复制出的 CSS 和右侧预览效果一致吗？
一致。预览用的就是真实 DOM 加 backdrop-filter，输出的也是同一份配置序列化后的样式声明，粘贴到任意页面即可得到相同效果。请注意 backdrop-filter 会模糊元素「背后」的内容，因此目标元素必须处在一个有背景的容器里才能看到模糊，单独放在纯白页面上时将看不出差别。
为什么调了模糊强度却看不到模糊效果？
最常见的原因有两个：一是卡片背景不透明度被调到了 100%，此时元素本身已经不透明，背后没有内容可供模糊，界面会给出提示；二是卡片背后是纯色或接近纯色的区域，模糊前后几乎无差别，建议换成渐变、内置背景或上传的图片再观察。
高光边缘是怎么实现的？
开启后在边框宽度大于 0 的前提下，用 135deg 的线性渐变作为 border-box 描边、半透明玻璃色作为 padding-box 填充，并把边框设为透明，从而形成左上亮、右下暗的折射感。关闭时则回退为普通的单色半透明边框。
上传的背景图片会上传到服务器吗？
不会。图片通过浏览器的 FileReader 在本地读取为 dataURL，仅用于本地预览与可能生成的 HTML 片段；页面不发起任何网络请求，断网也能正常使用，刷新页面后上传的图片不会保留。
为什么输出 HTML 片段时提醒体积变大？
当背景来源是上传图片且未勾选「使用占位 URL」时，图片会以 dataURI 内联进片段，文件体积会明显增大。若只想先把片段粘到文件里试跑，可以勾选占位 URL，片段中会改用 background.jpg 这样的相对路径，再自行把图片放进同目录。
明暗场景切换和对比度提示有什么用？
玻璃卡片常被用在深浅不一的背景上，同一个半透明背景在浅色与深色环境下文字可读性差别很大。切换明暗场景并查看对比度比率与等级（AA 级合格、AAA 级优秀、仅大文本可用、不达标），可以提前发现低对比度问题并调整文字色或玻璃背景。