CSS 玻璃拟态生成器
调节模糊度、透明度、边框和阴影，创建磨砂玻璃效果（glassmorphism），然后复制生成的 CSS。在您的浏览器中实时预览渲染效果，不会向服务器发送任何数据。
玻璃卡片
CSS 代码
工作原理
玻璃拟态结合了三个 CSS 属性：半透明背景、让元素后方内容变得朦胧的背景模糊（backdrop-filter: blur()），以及一条模拟“玻璃”边缘反光的细亮边框。通过滑块在文字可读性与视觉效果之间找到平衡，然后复制 CSS，应用到您的卡片、导航栏或模态窗口上。
玻璃拟态在所有浏览器中都能用吗？
所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 backdrop-filter 属性，生成的代码还包含 -webkit-backdrop-filter 前缀，以便更好地兼容 Safari。在非常老旧的浏览器上，元素仍然可见，只是没有模糊效果。
这种效果在什么样的背景上最明显？
玻璃拟态在元素后方有对比度或色彩的背景（渐变、图片、插画）上最为明显：在纯色浅色背景上，模糊效果并不突出。在真实界面中使用之前，请务必测试玻璃元素上文字的可读性。
100% 本地生成和预览：CSS 由您的浏览器根据您的设置计算，不会发送任何数据。