UI 稿缺视觉层次
产品经理凌晨 1 点发来新版登录页设计稿，背景是渐变蓝，要求按钮区有“高级感”。纯色卡片太闷，全透明又看不清文字。设计师在 Figma 里试了 6 种叠加方式都不满意。用本工具输入背景色 #1a73e8 和透明度 0.3，实时预览毛玻璃卡片，2 分钟定下模糊半径 12px 的参数，直接导出 CSS 代码贴进开发稿。
玻 璃Glass Parameters
14px
18%
180%
100%
18px
染 色Tint · 卡片底色
底色 tint
边 框Border
1px
40%
投 影Soft Shadow
32px
22%
背 景Backdrop · 毛玻璃需有内容衬托
仅本地预览，不上传服务器
预 设Gallery · 清透 / 磨砂 / iOS / 弹窗
毛玻璃卡片
Glassmorphism 半透明质感，背景模糊穿透，浮于彩色画面之上。
了解更多拖动滑杆实时调节 · 切换背景观察穿透
兼容
backdrop-filter 需较新浏览器：Chrome 76+ / Safari 9+（带 -webkit-）/ Edge 17+ / Firefox 103+（旧版需 layout.css.backdrop-filter.enabled）。不支持时建议加纯色 background 兜底。就绪 · 毛玻璃实时合成 · 全程浏览器本地处理
第一节
关于本工具
About设计稿里想加一层毛玻璃质感，但自己调背景模糊、半透明叠加、边框高光，来回试十几遍也未必对。这个工具把 CSS backdrop-filter 的 blur 值、背景色透明度、边框光效拆成独立滑块，拖一下就能看到实时预览。所有计算都在浏览器本地完成，参数不会上传——设计师调 UI 组件、前端搭原型时，可以直接把生成的 CSS 代码复制走用。
使用场景
H5 活动页做弹窗
运营周五要上线一个抽奖 H5，弹窗背景是活动主视觉——一张满屏的促销海报。产品要求弹窗半透明，能透出底图但文字必须清晰。设计师用 PS 高斯模糊做了 3 版，导出后在不同手机屏幕色温下效果全变。用本工具输入海报主色 #ff6b35，调出带 0.25 透明度的毛玻璃效果，文字区加白色投影，安卓和 iOS 预览一致。
个人博客改版封面
独立开发者想给技术博客加个封面卡片，背景用自己拍的城市夜景照片。试了 4 个在线编辑器，毛玻璃效果要么太假（像磨砂塑料），要么把照片细节全吃掉。用本工具上传原图后，锁定模糊半径 18px、饱和度 0.8，卡片边缘保留照片的光影过渡。最终效果接近 iOS 控制中心质感，直接复制 CSS 代码嵌入 Hexo 主题。
电商详情页做标签
美妆品牌详情页要在模特面部叠加产品成分标签，背景是高清人像图。纯白标签遮挡皮肤纹理，半透明又和肤色混成一片看不清字。用本工具生成毛玻璃标签，输入背景采样色 #f5d0b0，透明度拉到 0.2，模糊半径 8px，标签既透出皮肤质感，文字又保持 100% 可读。开发直接拿生成的 CSS 代码，省去反复切图。
App 新手引导遮罩
社交 App 要做新手引导，遮罩层需要盖住主页内容但透出大致布局。产品要求遮罩不能太暗（否则看不清界面元素），又不能太透（引导文字会和背景打架）。用本工具输入界面主色 #ffffff，调出带 0.15 透明度的毛玻璃遮罩，模糊半径 24px，引导气泡内的文字清晰，底部时间线隐约可见，用户一眼知道该点哪里。
第二节
使用指南
Getting Started使用步骤
- 1在「背景色」拾色器中选一个底色（如 #1a1a2e），预览区即时更新毛玻璃叠加效果
- 2拖动「模糊半径」滑块（0-50px），观察玻璃层虚化程度随数值变化实时刷新
- 3在「透明度」输入框键入 0.1-1.0 之间的数值（如 0.65），玻璃层通透度同步调整
- 4点击「边框颜色」拾色器并勾选「显示边框」，预览区玻璃边缘出现对应色描边
- 5点「导出 CSS」按钮，代码块内自动生成包含 backdrop-filter 和 background 的完整样式片段
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| rgba(255, 255, 255, 0.3) blur: 12px border: 1px solid rgba(255, 255, 255, 0.18) border-radius: 16px background: rgba(255, 255, 255, 0.25) | background: rgba(255, 255, 255, 0.25); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); | 常规：经典毛玻璃参数组合，验证基础 CSS 输出完整性，包含厂商前缀 |
| rgba(0, 0, 0, 0.1) blur: 0px border: none border-radius: 0px background: transparent | background: transparent; border-radius: 0px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border: none; | 边界：blur 为 0 时毛玻璃效果消失，但工具仍输出完整 CSS 结构，验证零值处理 |
| rgba(255, 255, 255, 0.5) blur: 200px border: 5px solid #fff border-radius: 50px background: rgba(255, 255, 255, 0.8) | background: rgba(255, 255, 255, 0.8); border-radius: 50px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(200px); -webkit-backdrop-filter: blur(200px); border: 5px solid #fff; | 边界：blur 值远超常规（200px），验证工具对极端模糊半径的兼容性，不报错 |
| rgba(255, 255, 255, 0.3) blur: 12px border: 1px solid rgba(255, 255, 255, 0.18) border-radius: 16px background: rgba(255, 255, 255, 0.25) color: #333 font-size: 16px | background: rgba(255, 255, 255, 0.25); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); | 易错：用户误将文字样式（color、font-size）填入毛玻璃参数，工具应忽略无关字段，只输出有效 CSS |
| rgba(255, 255, 255, 0.3) blur: 12px border: 1px solid rgba(255, 255, 255, 0.18) border-radius: 16px background: rgba(255, 255, 255, 0.25) box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) | background: rgba(255, 255, 255, 0.25); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); | 易错：用户自定义了 box-shadow，工具应覆盖为默认毛玻璃阴影，而非保留用户输入 |
| rgba(255, 255, 255, 0.3) blur: 12px border: 1px solid rgba(255, 255, 255, 0.18) border-radius: 16px background: rgba(255, 255, 255, 0.25) backdrop-filter: blur(5px) | background: rgba(255, 255, 255, 0.25); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); | 易错：用户同时输入了 backdrop-filter，工具应忽略用户值，使用自身 blur 参数生成 |
常见错误对照
1.背景图片缺失，毛玻璃效果不显示
✗ 错误
直接新建一个透明 div，应用 backdrop-filter: blur(10px);✓ 修复
在 div 下方放一张背景图片（background-image）或使用伪元素填充渐变背景，再应用 backdrop-filter。backdrop-filter 作用于元素背后的内容，如果背后是透明或纯白，模糊效果不可见。必须确保元素背后有图像或渐变。
2.忘记加 backdrop-filter 前缀，兼容性不足
✗ 错误
backdrop-filter: blur(10px);✓ 修复
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);Safari 和旧版 Chrome 需要 -webkit- 前缀。不加前缀在 iOS 和部分桌面 Safari 上完全失效。
3.模糊半径过大，内容完全不可读
✗ 错误
backdrop-filter: blur(50px);✓ 修复
backdrop-filter: blur(10px); 或根据背景复杂度控制在 5-15px。模糊半径过大（>30px）会将背景彻底雾化，导致上层文字与背景失去对比，可读性归零。
4.元素本身无背景色，毛玻璃无质感
✗ 错误
background: transparent; backdrop-filter: blur(10px);✓ 修复
background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px);纯透明背景 + 模糊 = 只有模糊后的背景，没有毛玻璃的“磨砂半透明”观感。必须叠加半透明背景色才能呈现玻璃质感。
5.未设置 overflow: hidden，边缘出现锯齿
✗ 错误
border-radius: 16px; backdrop-filter: blur(10px);✓ 修复
border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px);backdrop-filter 会在元素边界外产生模糊溢出，导致圆角边缘出现硬边或锯齿。overflow: hidden 裁剪掉溢出部分。
6.在 body 上直接使用 backdrop-filter，无效
✗ 错误
body { backdrop-filter: blur(10px); }✓ 修复
body { background: url(bg.jpg); } .glass-card { backdrop-filter: blur(10px); }backdrop-filter 需要元素有父级背景可模糊，body 本身没有父级背景层，滤镜无效果。必须将毛玻璃效果应用于子元素。
7.未考虑深色模式，毛玻璃文字看不清
✗ 错误
background: rgba(255,255,255,0.3); color: #333;✓ 修复
使用 CSS 变量或 prefers-color-scheme 动态切换背景色和文字色，确保对比度 ≥ 4.5:1。毛玻璃半透明背景在深色背景下会变暗，若文字色固定为浅灰，可能完全无法辨认。需适配主题。
第三节
工作原理
How It Works核心公式
RGBA = (R×α + BgR×(1-α), G×α + BgG×(1-α), B×α + BgB×(1-α), α)
变量说明
R, G, B前景色红绿蓝通道值(0-255)BgR, BgG, BgB背景色红绿蓝通道值(0-255)α毛玻璃透明度(0-1)，如0.4
示例
前景色(255,255,255)、背景色(50,50,50)、α=0.3：R=255×0.3+50×0.7=76.5+35=111.5≈112，G、B同理得(112,112,112,0.3)，即半透明白灰毛玻璃效果。
用户交互
浏览器处理
输出结果
第五节
常见问题
Q & A问我拖进去的图怎么没变成毛玻璃？＋
答
毛玻璃效果不是直接加在图片上的滤镜，而是对界面元素（如卡片、弹窗）的背景进行模糊和半透明处理。你需要先设置一个背景图或纯色背景，然后在上面放一个半透明蒙版层，再对这个蒙版层应用模糊。本工具生成的是CSS代码，你把这段代码应用到你的网页元素上，就能看到毛玻璃效果。
问调了模糊值但没变化，是工具坏了吗？＋
答
不是工具问题。毛玻璃效果的模糊度需要结合背景内容才看得出来。如果你只在一个纯色背景上预览，模糊再大也看不出变化，因为纯色没有细节可糊。建议在工具预览区先上传一张纹理丰富的背景图（如照片、渐变），再调整模糊滑块，效果就明显了。
问生成的CSS代码能直接复制到我的网站上吗？＋
答
可以。本工具生成的CSS代码包含 `backdrop-filter: blur()` 和 `background-color: rgba()` 两个核心属性，直接复制到目标元素的样式里就能生效。注意：`backdrop-filter` 需要浏览器支持（Chrome 76+、Firefox 70+、Safari 9+），老旧浏览器（如IE）不兼容。如果用户反馈没效果，先检查浏览器版本。
问为什么毛玻璃效果在手机上看起来和电脑上不一样？＋
答
主要三个原因。一是手机屏幕PPI更高，同样模糊值在手机上看起来更细腻，可能显得模糊不够；二是手机浏览器对 `backdrop-filter` 的渲染性能有限，部分低端机型会降级或卡顿；三是手机屏幕小，半透明层的对比度感知不同。建议在手机上预览时适当增加模糊值（如从15px调到20px），并调整透明度让文字更清晰。
问这个工具和PS做毛玻璃有什么区别？＋
答
PS做的是静态图片毛玻璃，导出后无法再调整。本工具生成的是CSS代码，毛玻璃效果是实时渲染的，背景内容变化（如滚动、动画）时玻璃效果会动态更新。另外，PS需要下载安装，本工具纯浏览器运行，即开即用，适合前端开发者在设计稿转代码时快速调参。缺点是无法像PS那样精细控制图层混合模式。
问设置透明度和模糊后，上面的文字看不清怎么办？＋
答
这是毛玻璃的常见问题。解决方案：1）降低透明度（`rgba` 的 alpha 值从0.5降到0.3），让背景更透光；2）在文字层加一层微弱的投影或文字阴影（`text-shadow`）；3）给毛玻璃层加一个深色或浅色的叠加层（如 `background-color: rgba(0,0,0,0.2)`），增加对比度；4）适当降低模糊值，保留更多背景细节来衬托文字。本工具生成的代码里 `background-color` 的 alpha 值可以手动调整。
问这个工具需要上传图片到服务器吗？隐私安全吗？＋
答
完全不需要上传。本工具是纯前端实现（FE），所有图片处理都在你的浏览器本地完成，不会将任何数据发送到服务器。你拖入的图片、设置的参数、生成的代码，全程不出本地。关闭页面后数据自动清除，不用担心隐私泄露。
问为什么我调了参数但预览区没变化？＋
答
先检查是不是浏览器卡住了。本工具使用 `requestAnimationFrame` 实时渲染，如果预览区没有响应，刷新页面重试。其次，确认你操作的滑块或输入框是否真的绑定了预览区——有时鼠标滚轮误触了页面其他区域。最后，检查浏览器控制台有无报错（如 `backdrop-filter` 不支持），老旧浏览器会静默失效。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。