backdrop-filter 模糊元素后方背景
Developer Design Utility
Glassmorphism 生成器
通过调整透明度、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 代码”按钮。
帮助
什么是 Glassmorphism？
Glassmorphism 是一种通过半透明背景、模糊效果、细边框和阴影来模拟玻璃质感的 UI 风格。常用于卡片、模态框、横幅、仪表盘组件和个人资料面板。
使用方法
- 调整 Glass Color、Background Opacity、Backdrop Blur 和 Saturation。
- 通过 Border Opacity、Radius、Shadow 和 Padding 调整卡片层次与形状。
- 在预览背景上检查玻璃质感和文本可读性。
- 生成 CSS 代码后，复制结果或下载为 CSS 文件。
玻璃效果不明显怎么办？
在卡片后方放置渐变或图片等具有颜色变化的背景，可以让模糊效果更加明显。提高 Blur 值和 Border Opacity 也会有所帮助。
文字可读性不足怎么办？
可以提高 Background Opacity，或者使用更深的文字颜色。过于透明的玻璃卡片虽然美观，但在实际界面中可能降低可读性。
backdrop-filter 在所有浏览器中都支持吗？
大多数现代浏览器都支持，但某些环境仍可能存在限制。因此建议同时添加 -webkit-backdrop-filter。