玻璃拟态 CSS 生成器
可视化调整背景透明度、backdrop-filter 模糊与饱和度、边框、圆角和阴影，实时预览毛玻璃效果并复制 CSS 与 HTML 片段。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
玻璃卡片
在彩色背景上叠加半透明与模糊
预设
背景
25%
毛玻璃
16px
180%
边框与圆角
1px
40%
20px
阴影
32px
18%
代码
CSS
.glass-card {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}webkit 前缀让 Safari 也能正确渲染。
HTML
<div class="glass-card" style="background: rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 20px; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18)"> 玻璃卡片 </div>
这个工具能做什么
- 做毛玻璃卡片：调好背景透明度、backdrop-filter 的模糊与饱和度，直接把 CSS 与内联样式的 HTML 一起复制走。
- 在彩色或图片背景上试不同通透度（通透、磨砂、深色、霓虹、暖调五个预设），避免盲写数值来回改。
- 排查「毛玻璃在 Safari 上没效果」：输出的 CSS 自动带上 -webkit-backdrop-filter 前缀。
- 想快速确认某组参数的实际观感时，先用实时预览看效果，再决定圆角、边框和阴影的取值。
示例
输入
默认「磨砂」参数：背景 #FFFFFF / 25%、模糊 16px、饱和度 180%、边框 1px #FFFFFF / 40%、圆角 20px、阴影 32px #0F172A / 18%
输出
.glass-card {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}阴影的垂直偏移是模糊半径的一半（32 ÷ 2 = 16），模糊或阴影填 0 时对应声明会整条省略。
常见问题
为什么复制出来的 CSS 有两行 backdrop-filter？
第一行是 -webkit- 前缀版，Safari 至今仍需要它；第二行是标准属性。两行写在一起，现代浏览器会自动忽略不认识的那一行。
毛玻璃没有效果是怎么回事？
backdrop-filter 只能模糊元素背后真实存在的内容。如果卡片背后是纯色或空背景，看不到任何变化——先给它一张图片或渐变背景，再调模糊半径和饱和度。
模糊半径和饱和度分别调什么？
模糊半径控制背后内容的糊化程度，越大越糊；饱和度 100% 是原样，调高会让透过来的颜色更鲜艳，霓虹预设就用了 260%。模糊填 0 且饱和度填 100 时，backdrop-filter 会被整条省略。
背景透明度要调到多少才好看？
没有标准答案，取决于背后内容的对比度：浅色背景上 20%–30% 通常够用，深色背景建议 40% 以上，否则卡片会「糊」进背景里看不出边界。这时候把边框透明度也一起调高会更清晰。
颜色能写 rgb() 或英文色名吗？
不能。颜色必须是 #RGB 或 #RRGGBB（# 可省略），透明度用旁边的滑块单独控制，最终统一输出成 rgba()，避免混用不同写法导致的不一致。
关键词：glassmorphism玻璃拟态毛玻璃backdrop-filtercss 生成器frosted glasscssblur