已复制

CSS 毛玻璃生成器

Glassmorphism 效果可视化，实时调节玻璃态参数

玻璃效果参数

Glass Card

玻璃拟态效果预览卡片

生成的 CSS 代码

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
使用说明
调节毛玻璃参数
通过左侧滑块调节背景模糊、透明度、边框宽度、边框透明度、圆角和阴影强度，实时预览区会即时展示效果。
背景色选择
使用颜色选择器可更改玻璃效果的基底颜色，预览卡片和 CSS 代码会同步更新。
复制 CSS
下方自动生成了完整的 CSS 代码，包含 backdrop-filter 和 -webkit-backdrop-filter 兼容写法。点击「复制 CSS」即可使用。