玻璃拟态CSS生成器 - 在线工具箱

玻璃拟态CSS生成器

在线免费玻璃拟态CSS生成器，调节磨砂、边框、阴影实时预览，一键复制 backdrop-filter 样式代码，浏览器本地运行。

玻璃卡片
backdrop-filter 实时预览
示例按钮
提示：将预览区缩小窗口看模糊边缘
磨砂参数
12px
25%
160%
边框与阴影
1px
40%
20px
20%
背景方案
40px
CSS
.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}

💡 需要半透明背景与元素后方有内容，磨砂效果才明显

常见问题

什么是玻璃拟态？
一种流行的 UI 风格：半透明背景加 backdrop-filter 模糊，像磨砂玻璃卡片浮在彩色背景上，Windows 11、macOS 控制中心都是这种设计。
生成的代码怎么用？
复制 CSS 直接给元素加上即可，注意元素背后要有内容（图片、渐变背景），磨砂效果才明显；Safari 需要 -webkit-backdrop-filter 前缀，代码里已包含。
支持哪些浏览器？
Chrome、Edge、Firefox、Safari 新版本都支持 backdrop-filter，老浏览器会优雅降级为半透明色块。