CSS 毛玻璃效果生成器

毛玻璃效果（Glassmorphism）让面板看起来像磨砂玻璃：背后的页面被模糊并略微增艳后透出来，上面是一层薄薄的半透明底色和浅色边框。这个效果依赖 CSS 的 backdrop-filter 属性。这个生成器会写出完整的规则：半透明背景、backdrop-filter: blur() saturate()（含 Safari 曾经需要的 -webkit- 重复行）、边框、圆角和阴影，并把卡片放在色彩丰富的背景上预览。

使用方法

1. 选择底色及其不透明度（大多数设计用 10–30% 就合适）。
2. 设置透过玻璃看到的背景的模糊和饱和度。
3. 调整边框不透明度、圆角和阴影。
4. 复制 CSS，应用到放在图片或渐变背景上的元素；在纯色背景上看不出玻璃效果。

计算公式

background: rgba(底色, 不透明度) · backdrop-filter: blur(<px>) saturate(<%>) · border: 1px solid rgba(底色, 边框不透明度)

模糊半径是高斯模糊的标准差。saturate(180%) 会让玻璃后面的颜色增艳到 1.8 倍。图片预览无法运行 backdrop-filter，所以预览用 SVG 滤镜来模拟它。

示例

默认值生成 background: rgba(255, 255, 255, 0.2)（20% 的白色），配合 backdrop-filter: blur(12px) saturate(180%)、30% 白色的 1 px 边框、16 px 圆角和柔和的 0 8px 32px 阴影。深色版本用 35% 的黑色、8 px 模糊和 100% 饱和度，此时会省略 saturate() 步骤，只保留 blur(8px)。