玻璃拟态生成器
使用实时预览创建磨砂玻璃CSS效果。
16px
80%
30%
px
#ffffff
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
用 CSS 制作毛玻璃（玻璃拟态）效果
概述
玻璃拟态就是毛玻璃外观——一块半透明、模糊的面板，让背景柔和地透出，由现代操作系统带火。在 CSS 中重现它需要恰当地组合背景透明度、背景模糊、微妙的边框和阴影。此生成器让你用实时预览调节每个部分并复制确切的 CSS，让你无需反复试错就能得到该效果。
使用步骤
- 1
设置透明度和模糊
调节背景不透明度和背景模糊，控制玻璃的磨砂程度。
- 2
调整边框和阴影
加一条微妙的浅色边框和柔和阴影，赋予面板玻璃般的边缘与深度。
- 3
复制 CSS
把生成的规则粘贴到你的元素上——确保它位于彩色或图片背景之上才能看到效果。
工作原理
该效果叠加几个 CSS 属性：半透明的背景色、用 backdrop-filter: blur() 把元素后面的内容磨砂化、一条细的浅色边框以勾勒玻璃的“边缘”，以及一抹柔和阴影带来深度。你用滑块调节模糊、透明度和颜色，同时背景之上的预览显示效果，然后把生成的规则复制进样式表。
什么时候用
设计浮于彩色背景或图片之上的卡片、导航栏或模态框。为界面赋予现代、分层的深度。匹配 iOS 或 Windows 的毛玻璃面板风格。制作既能显示背后内容又保持可读的叠层。在写进代码前先原型化玻璃效果。学习 backdrop-filter 与透明度如何结合。
常见问题
backdrop-filter 只模糊元素后面的内容，所以它后面需要有彩色内容或图片——在纯白背景上没有可磨砂的东西。另外请确认元素背景是半透明的，而非纯色。
注意事项
backdrop-filter 很耗 GPU；一页上有很多玻璃面板，尤其在动画或滚动时，可能拖慢低端设备的渲染。请只在关键元素上少量使用该效果。