CSS 毛玻璃效果生成器

功能说明

毛玻璃（Glassmorphism）是近几年最流行的界面风格之一：一层半透明的「玻璃」浮在彩色背景之上，透过它能看到后方景象被柔和地模糊掉，再配一圈极细的亮边和高斯阴影，质感立刻高级起来。

它的技术核心是 CSS 的 backdrop-filter: blur()——注意它作用于元素「背后」的图层，而不是元素自己。这跟普通的 filter: blur() 完全不同，后者是把元素本身模糊掉。

使用步骤

1. 拖动或输入各项参数，上方预览区会实时变化，可以直观感受每个参数的作用。

2. 模糊半径控制背后景象的虚化程度，一般 8-20 px 比较自然。

3. 透明度越低玻璃越通透，但文字可读性会下降，0.2-0.35 是比较稳妥的区间。

4. 调好后点「复制 CSS 代码」，直接粘进你的样式表即可。

常见问题

Q：为什么粘到我的项目里没效果？
A：最常见的原因有三：一是元素背后是纯色背景（没有内容可模糊），需要加背景图或渐变；二是元素自身背景完全不透明，把模糊层盖住了；三是祖先元素设置了 overflow: hidden 或 transform，影响了层叠上下文。另外 Safari 需要 -webkit-backdrop-filter 前缀（代码里已包含）。

Q：会影响性能吗？
A：backdrop-filter 是 GPU 密集型操作，大面积的毛玻璃元素在低端设备上可能掉帧。建议只用在导航栏、卡片、弹窗这类局部区域，避免全屏铺满。

Q：文字看不清怎么办？
A：适当提高玻璃底色透明度、加深文字颜色，或给文字加淡淡的 text-shadow。如果背后内容色彩杂乱，也可以把玻璃底色调成带一点品牌色的浅色调。

你可能还想问

毛玻璃效果的核心是什么？

主要是背景模糊（backdrop-filter）配合半透明背景色与细边框；缺了模糊参数就只剩半透明色块，观感完全不同。

性能会有影响吗？

背景模糊是较重的合成操作，大面积或大量元素叠加时可能掉帧（移动端尤其明显）；建议限制使用范围并避免动画频繁重绘。

兼容性怎么处理？

现代浏览器支持良好，旧版 Safari 需加前缀，不支持时使用更不透明的背景色作为回退，保证文字可读性不受影响。

相关工具

相关内容