CSS 玻璃拟态生成器

工具介绍

玻璃拟态是一种界面风格:元素看起来像磨砂玻璃——半透明背景让后面的颜色透出来,同时 backdrop-filter: blur() 把这层背景模糊化,让它读起来像玻璃而不是一块普通的透明面板。通常再配上一圈细细的半透明边框和圆角来完成整体效果。

这个工具让你可以可视化地做出这种效果。预览区特意放在一个流动的渐变背景上方,这样才能看清模糊效果——玻璃拟态只有在背后有颜色或细节的情况下才能正确呈现,单纯的白色页面上是看不出来的。调整背景色的不透明度、模糊强度、边框的不透明度和圆角半径,然后复制生成的 CSS。

来源:Filter Effects Module Level 1, W3C —— 定义了 backdrop-filter,即该效果所依赖的属性。

为什么使用它？

• 在色彩丰富的动态背景上实时预览,能真正看到磨砂玻璃效果,而不是对着空白背景瞎猜模糊数值。
• 背景不透明度、背景模糊强度、边框不透明度和圆角全部集中在一个界面里调整。
• 自动同时输出 backdrop-filter 和 -webkit-backdrop-filter 前缀,不用担心漏掉 Safari 支持。
• 全部在浏览器本地计算,你调整的任何参数都不会上传。
• 免费、不用注册,手机上也能用。

使用方法

1. 选一个背景色并调整它的不透明度——较低的不透明度(10–25%)看起来像玻璃;不透明度较高则更像一块带颜色的实心面板。
2. 增大模糊强度来模糊元素背后的内容——这才是真正做出磨砂玻璃观感的关键,和透明度本身是两回事。
3. 调整边框不透明度,加一圈细微的高光边缘,这能帮玻璃卡片看起来是独立的一层表面,而不是和背景融为一体。
4. 设置圆角半径——玻璃拟态卡片几乎总是圆角的,很少用直角。
5. 复制生成的 CSS 并粘贴到你的样式表里。记住这个元素背后必须有带颜色或纹理的内容——在纯色平面背景上,玻璃拟态效果是看不出来的。

示例

输入

背景:白色,不透明度 20% · 模糊:10px · 边框不透明度:30% · 圆角:16px

输出

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

一种经典的磨砂玻璃卡片风格,常用于登录面板、导航栏和仪表盘小组件,背景通常是彩色或图片。

Safari 与浏览器支持

backdrop-filter 在当前版本的 Chrome、Firefox、Edge 和 Safari 中都受支持,但 Safari 历来需要同时写上 -webkit-backdrop-filter 前缀和无前缀属性才能渲染模糊效果——不加前缀的话,较旧版本的 Safari 会静默忽略模糊,只显示纯色透明背景。正因如此,这个工具始终会同时输出这两行声明。

关于当前的浏览器兼容性细节,可以参考 MDN 的 backdrop-filter 文档:https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter。

为什么玻璃拟态需要背后有内容

backdrop-filter 只会模糊元素视觉上背后的内容——背景图片、渐变、另一个有颜色的元素,或者滚动到下方的内容。在纯白色或单色背景上,没有任何东西可以被模糊,效果就会完全看不出来,元素只会显得像一个略带颜色的圆角方块。要让效果真正呈现,请始终把玻璃拟态元素放在渐变、图片或其他有细节的背景上。

配合其他 CSS 效果一起用

玻璃拟态卡片通常会在底部搭配一层柔和的 box-shadow 来增加层次感。先在这里生成磨砂玻璃 CSS,再用「盒阴影生成器」加一层柔和阴影,把两段声明一起应用到同一个元素上。

→ 盒阴影生成器 · 圆角生成器

常见问题