玻璃拟态（Glassmorphism）CSS 生成器

生成磨砂玻璃 CSS：backdrop-filter 模糊与饱和度、着色颜色与不透明度、边框和阴影，并包含 Safari 所需的 -webkit- 前缀。

预设

玻璃效果设置

模糊px

背景饱和度%

着色颜色

着色不透明度

边框不透明度

半径px

投影

预览设置

背景

预览

磨砂玻璃

背景透过玻璃，呈现模糊效果。

CSS 代码

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

什么是玻璃拟态生成器？

创建磨砂玻璃（玻璃拟态）效果：一块带着色的半透明面板，会对其后方的内容进行模糊和增加饱和度，并可选配浅色边框和柔和阴影。预览把卡片放在色彩丰富的背景上，方便你评估效果。

如何使用玻璃拟态生成器

选择预设：磨砂、深色玻璃、彩色或轻薄。
调整“模糊”和“背景饱和度”。
选择“着色颜色”和“着色不透明度”、“边框不透明度”和“半径”。
切换“投影”，并在“预览设置”中尝试不同的“背景”。
复制 CSS 代码。

示例

输入

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

输出

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

何时使用玻璃拟态生成器

适合放在图片或色彩丰富的渐变之上的卡片、导航栏和模态框。只有元素后方有可见内容时，效果才会显示；在纯色之上，它看起来只是普通的半透明方框。请检查文字对比度，因为玻璃后方的背景会变化。

玻璃拟态生成器的工作原理

面板背景是按所选不透明度（rgba()）设置的着色颜色，边框使用同一颜色并按边框不透明度设置。模糊和饱和度写入 backdrop-filter: blur(px) saturate(%)；saturate(100%) 不会改变任何东西，因此被省略。该声明写两次，先是 Safari 仍然需要的 -webkit- 前缀版本，再是无前缀版本。如果模糊为 0 且饱和度为 100%，则完全不会写入 backdrop-filter。