玻璃态生成器

设置基础背景色、透明度、模糊强度、圆角与边框宽度,工具会生成基于 backdrop-filter: blur() 的毛玻璃(Glassmorphism)效果 CSS,适合卡片、导航栏与弹窗等现代化界面。全部在浏览器本地完成。

玻璃态设置 等待输入

背景色支持 #hex 写法;透明度控制玻璃的通透程度。

生成结果
背景色—
模糊—
设置参数后点击生成,CSS 代码将显示在这里。

模糊效果需浏览器支持 backdrop-filter;结果仅供参考。

使用说明
  • backdrop-filter: blur() 会对元素背后的内容做模糊处理。
  • 背景使用带透明度的 rgba() 颜色,才能透出模糊的背景。
  • 半透明的浅色边框可增强玻璃的立体感。
  • 需同时保留 -webkit-backdrop-filter 以兼容 Safari。
  • 玻璃态适合叠加在图片或渐变之上,效果更明显。