玻璃拟态 CSS 生成器 — 毛玻璃
用模糊、透明度、饱和度、边框和圆角滑块制作毛玻璃(玻璃拟态)卡片:实时预览并生成 CSS——在浏览器中完成。
🔒 全部在你的浏览器中运行。输入和输出都不会发送到服务器或被保存,十分安全。
关于此工具
这款玻璃拟态(glassmorphism)生成器能打造你在现代应用和网页设计中常见的磨砂玻璃质感,并把可复制的 CSS 交给你。调整模糊度、透明度、背景色调、边框和圆角,实时面板会在彩色背景上展示悬浮的效果,方便你判断可读性。在底层,它依靠 backdrop-filter 来模糊元素背后的内容。面板满意后,把生成的规则复制到你的样式表中——而且一切都在你的浏览器中运行。
常见问题
磨砂玻璃效果实际上是怎么实现的?
它叠加了三种要素:半透明的背景,让一些颜色透出来;backdrop-filter 模糊,把面板背后的内容磨成毛玻璃;以及一道细腻明亮的边框,像真正的玻璃那样勾勒出边缘。模糊是关键所在——它柔化的是下方的内容,而非面板自身的文字。由于该效果取样的是其背后的画面,玻璃拟态悬浮在彩色或照片背景上时最为出彩,而非纯色背景。
backdrop-filter 在所有浏览器中都能用吗?
backdrop-filter 在所有主流浏览器的当前版本中都受支持,但有一些注意事项。Safari 需要 -webkit-backdrop-filter 前缀,生成器已为你加上;一些较旧的浏览器则会完全忽略该属性——这时面板只会显示其纯粹的半透明背景,没有模糊。强烈的模糊在低端设备上也可能拖累性能。明智的做法是即使磨砂效果无法渲染也让文字保持可读,从而让设计优雅降级。
生成的 CSS 可以直接使用吗?工具是在本地运行的吗?
两者都是肯定的。工具会输出一整套规则——背景、模糊、边框和圆角,并已包含 -webkit- 前缀——你可以直接粘贴到样式表中,应用于任何面板或卡片。当你调整滑块时,这一切都在你的浏览器中本地生成,因此你的设计和设置绝不会被上传,而且页面加载之后,即使离线预览也能继续工作。