毛玻璃效果怎么做才好看,玻璃拟态 CSS 从原理到上线

毛玻璃(玻璃拟态)这两年从苹果系统设计里溢出来,iOS 控制中心、Big Sur 的侧边栏、各种 SaaS 落地页的浮动卡片,都在用同一套观感:一块半透明的面板浮在彩色背景上,背景被它糊成柔和的色块,边缘还有一圈淡淡的高光描边。看着简单,真自己写起来,十有八九会糊出一块灰扑扑的透明矩形,完全没有那种"玻璃"质感。

这篇把毛玻璃拆开讲,从原理到可读性到性能,最后给一段能直接贴进项目的 CSS。

毛玻璃的三件套到底是哪三件

很多人以为毛玻璃就是把 opacity 调低。不对,opacity 调低只会让整个元素连同里面的文字一起变淡,那是"透明",不是"玻璃"。

真正的毛玻璃靠三件东西叠出来:

第一件,背景模糊。这是灵魂,用的是 backdrop-filter,它模糊的不是元素自己,而是元素背后透出来的那部分背景。第二件,半透明的填充色。给面板一个带 alpha 的背景色,比如白色 18% 不透明度,模糊后的背景透过这层淡色,就有了"蒙了一层"的感觉。第三件,描边。一条 1px 的半透明白色边框,模拟光打在玻璃边缘的高光,卡片立刻就立体了。

三件缺一不可。少了模糊只剩透明色,是塑料片;少了描边,卡片会"陷"进背景里没有边界。

backdrop-filter blur 才是关键这一行

把关键那行单独拎出来说,因为这是最多人写错的地方:

backdrop-filter: blur(18px) saturate(140%);

blur(18px) 是模糊半径,数值越大背景越糊。日常卡片 12 到 20px 区间最稳;低于 8px 几乎看不出效果,高于 26px 背景就糊成一片纯色,反而丢了玻璃的层次。saturate(140%) 是给透出来的背景提一点饱和度,苹果系统的玻璃之所以显得"通透有色彩",饱和度补偿功不可没,不加这一项,模糊后的背景会发灰发闷。

还有一个坑:Safari。iOS Safari 14 到 16、macOS Safari 13 到 15 都需要 -webkit- 前缀,而且前缀那行要写在标准行前面。漏了它,这批用户看到的就是一块纯透明矩形,玻璃完全消失。

一段能直接贴的苹果风玻璃卡片

下面这段是我自己项目里在用的苹果风毛玻璃,白色调,适合浮在彩色渐变或者照片背景上:

.glass-card {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

逐行说:rgba(255,255,255,0.18) 是那层 18% 的白色蒙版;两行 backdrop-filter 一行带前缀一行不带,顺序不能反;border 那条 30% 白描边就是高光;border-radius: 16px 给圆角,毛玻璃几乎都配大圆角;最后 box-shadow 让卡片浮起来,阴影越柔毛玻璃越高级。这段贴到任意彩色背景上就有效果,白底上反而没效果,原因下一节说。

手动调这九个参数挺费劲,我后来都直接用毛玻璃 CSS 生成器,拖滑块实时预览,还能切 8 套真实背景看色调撑不撑得住,顺手导出 CSS、Tailwind、SwiftUI 三份代码,比来回改数值刷新快太多。

可读性别让玻璃吃掉你的文字

毛玻璃最容易翻车的不是好不好看,是文字读不读得清。半透明面板下面如果是一张高对比度的照片,白色标题压上去经常糊成一团。

几个实测有效的办法:把填充色的 alpha 提到 18% 以上,蒙版越厚文字越稳,8% 那种几乎纯透明的玻璃,标题直接变幽灵;给文字本身加一层很淡的 text-shadow 兜底;深色背景上用白字,浅色背景上换深字,别一套配色走天下。还有一个常被忽略的点,纯白背景上做毛玻璃是没意义的,背后没有彩色,模糊就没有原料可糊,你看到的只是一块略透明的板子。真要在白底上用,就把描边透明度提到 30% 到 40%,靠边框和阴影撑出边界。

性能:别让老 iPhone 掉帧

backdrop-filter 是实时计算的,每一帧都要把背后的像素重新模糊一遍,开销不小。一两个静态卡片没问题,但有三种情况要警惕。

一是同时把 blur 拉到 24px 以上、saturate 又超过 180%,这种 overdraw 在老 iPhone 上很容易掉帧,两个参数里挑一个当主轴就好。二是给滚动列表里的每一项都套毛玻璃,几十个实时模糊层叠加,滚动会卡顿,长列表慎用。三是给毛玻璃元素加动画,模糊 + 位移 + 透明度一起动,GPU 压力很大,能用 transform 代替的尽量用 transform。配合 CSS 变换生成器调位移和缩放,比直接改 left/top 省性能。

调圆角和阴影这两件配套的事,也可以丢给 CSS 圆角生成器和 CSS 阴影生成器,三个工具配齐,一张玻璃卡片的样式基本就齐活了。

毛玻璃说到底是"模糊 + 半透明 + 描边"三件套的配合,原理不复杂,难的是在不同背景、不同设备上都稳。先把 backdrop-filter 和 -webkit 前缀写对,再盯着可读性和性能调,做出来的玻璃才经得起上线。

Made by Toolora · Updated 2026-06-13