玻璃拟态 CSS 生成器
调节模糊、饱和度、不透明度、圆角与阴影，实时预览并复制可直接使用的 CSS。
16px
180%
25%
30%
16px
30%
效果预览
玻璃拟态卡片
半透明面板叠在背景上，靠 backdrop-filter 把背后的颜色采样后模糊加饱和。
CSS 代码
使用指南
- 拖滑块调参数
背景模糊 0 到 60 像素最常用的是 12 到 20，饱和度默认 180% 能让背景色彩更饱满，底色不透明度 10% 到 30% 之间调。
- 看实时预览
预览区铺的是紫粉渐变，参数一变卡片立刻跟着变，方便对比不同数值的效果。
- 复制 CSS
确认效果后复制代码框内容，类名默认是 .glass-panel，按自己的项目改一下即可。
常见问题
为什么我做的卡片没有模糊效果？
九成是因为背后没有内容。backdrop-filter 采样的是元素背后的像素，如果背后是纯色背景，模糊前后完全一样，看起来就是没有效果。给背后放一张图片、渐变或任何有细节的东西才能看出差别。另外确认父级没有设置 overflow:hidden 之外的一些奇怪属性，以及浏览器确实支持这个属性。
Firefox 和 Safari 的支持情况怎么样？
Firefox 从 103 版才支持 backdrop-filter，更早的版本会退化成普通的半透明块——界面还能用，但磨砂感没有。Safari 需要 -webkit-backdrop-filter 前缀，生成的代码里两个都写了，Safari 上能直接用。Edge、Chrome、Opera 从 76 版起完整支持。
底色不透明度调多少合适？
常用的区间是 10% 到 30%。太低会让文字与背景混在一起影响可读性，太高磨砂感就没了。深色背景配白色底色、浅色背景配黑色底色，是对比度最高也最常见的搭配。
边框和阴影是必需的吗？
不是必需，但缺了边缘会很模糊。玻璃拟态的层次感主要靠一条半透明的亮边（20% 到 40% 不透明度）和一层很淡的投影撑起来，这两步能把「一块半透明色块」变成「一片玻璃」。