适用人群
- 设计覆盖面板的设计师
- 添加玻璃效果卡片的开发者
Developer Design Utility
玻璃拟态CSS生成器
通过调整透明度、backdrop blur、边框、圆角和阴影，创建玻璃质感的 Glassmorphism CSS，并实时查看效果。
创建 Glass UI
结合半透明背景与模糊效果，创建玻璃风格的 UI 卡片。
实时预览
Opacity、Blur、Border、Radius、Shadow 数值会立即反映到预览卡片中。
复制 CSS 代码
可以复制生成的 Glassmorphism CSS，也可以下载为 CSS 文件。
Blur
18px
Opacity
22%
Border
34%
Radius
28px
STEP 1
Glassmorphism 设置
调整背景颜色、透明度、模糊、饱和度、边框和阴影，创建理想的玻璃效果。
玻璃卡片的基础背景颜色。白色适合经典 Glass UI，彩色适合强调型卡片。
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
Live Preview
Glass UI
Glassmorphism Card
实时查看透明玻璃质感与模糊效果。
Blur
18px
Opacity
22%
Radius
28px
STEP 2
推荐预设
快速应用常用于卡片、横幅、模态框和深色背景 UI 的 Glassmorphism 风格。
基础 Glass UI
彩色 Glass UI
特殊风格
STEP 3
等待中
生成结果
以下代码可直接用于 CSS 文件、组件样式或内联样式。
选择设置后，点击“生成 CSS 代码”按钮。
让玻璃拟态面板在实际背景上保持可读
预览半透明面板并生成模糊、饱和度、边框和阴影CSS。对于不支持背景滤镜的环境，输出包含更不透明的备用背景。
使用场景
- 在有纹理的背景上放置卡片。
- 比较滤镜与备用背景。
从输入到检查结果
- 1
选择有效的3位或6位HEX颜色。
- 2
从足以看清文字的不透明度开始。
- 3
结合背景调整模糊和饱和度。
- 4
设置边框、圆角、阴影和内边距。
- 5
导出后检查实际背景、备用显示和目标设备。
浅色面板
- 输入
- #ffffff；不透明度22%；模糊16px
- 结果
- 半透明白色背景与blur(16px)。
文字可读性取决于面板后面的图像。
不支持背景滤镜
- 输入
- 在不支持backdrop-filter的环境应用CSS
- 结果
- @supports备用规则提供更不透明的背景。
背景仍然可见，但文字对比度仍需检查。
计算与处理原理
将HEX转换为RGBA，并组合模糊、饱和度、边框、圆角、阴影和内边距。输出backdrop-filter、WebKit前缀版本及非支持环境的备用规则。
限制与注意事项
- 纯色背景上可能看不出明显模糊。
- 大面积滤镜和移动背景可能增加渲染开销。
- 不会测量真实背景每个位置的文字对比度。
数据处理
颜色和设置在浏览器内处理，不上传输入。
参考资料
相关工具
常见问题
为什么看不出模糊？
滤镜作用于面板背后的内容，可用纹理背景和半透明面板比较。
模糊越强就越清晰吗？
不一定。还需考虑不透明度、文字颜色和背景图像。
能删除备用规则吗？
建议保留或按实际用途调整，使不支持滤镜的环境也能阅读内容。