搜「液态玻璃」的人，脑子里想的基本是同一个画面：iOS 26 上那层浮在内容之上的控件，背景不只是被磨毛了，还被轻轻掰弯了——边缘一圈像放大镜边上那样的挤压感，底下的图案顺着弧线拐了个弯。
但网上能搜到的「液态玻璃教程」，九成给的是这么一行：
backdrop-filter: blur(12px);
这行代码做出来的是毛玻璃（Glassmorphism），只有模糊，没有弯折。它很好用、很便宜，caniuse 上的全球支持率 96.36%，Chrome 76、Safari 9、Firefox 103 以后都行。但它给不了那个「掰弯」。
要让背景真的弯，网页上只有两条路。一条是 SVG 的位移滤镜 feDisplacementMap：按 MDN 的定义，它拿一张图的颜色通道值去挪另一张图的像素位置——像素被挪走了，直线才会变成曲线，这才叫折射。这个能力 2015 年 7 月起各家浏览器就都有。另一条是 WebGL，自己写着色器算折射。
麻烦在于第一条路接不上 CSS。backdrop-filter 的语法里是可以写 url(#filter) 的，按说能直接把 SVG 位移滤镜作用在背景上。
但 MDN 浏览器兼容数据仓库里 2024 年 8 月提的那条记录至今没关：SVG 滤镜挂在 filter 上时 Firefox 和 Safari 都正常，挂到 backdrop-filter 上这两家都不生效。结论很直接——纯 CSS 的「真折射液态玻璃」，不是一个能跨浏览器交付的东西。
所以这一篇不按部位分，按做法和它的代价分成三档。你要装导航栏也好、要下拉菜单也好，先知道自己站在哪一档上，后面的取舍才有依据。
第一档：只用
backdrop-filter的毛玻璃，一行起步、到处能跑，但背景不会弯；第二档：用多层渐变和高光把「液态」堆出来，观感最接近 iOS 26，兼容性照样稳，网站上真要用的基本都在这一档；
第三档：WebGL 或 SVG 做真折射，好看，但都是整屏级的东西，只适合首屏。
要是你目标明确、只想找某个部位的现成代码，按这个直接跳：导航与菜单看 01、14、15，下拉与右键菜单看 12、13，卡片看 04、05、07、08，成套的组件库看 10 和 11，图标与控件看 02、09，文字看 03，文件夹看 06，银行卡看 16，整屏首屏看 17 到 20。
第一档 · 只用 backdrop-filter 的毛玻璃
一行属性起步，没有依赖，任何静态页里都能塞。代价是它只会模糊：背景里的直线穿过玻璃还是直线。下面七款都属于这一档，但它们踩的坑不一样，值得分开看。
01. 固定顶部的渐变模糊导航
页面顶部一条吸顶导航，模糊不是均匀一片，而是从上往下带渐变过渡，往下越来越透。这是毛玻璃导航里最保险的一种写法——内容从下面滚过去，导航区不会突然出现一条硬边。
如果你只是想给现有网站的顶栏换个质感，从这一款开始，不要从第三档开始。
02. 悬停才起雾的 SVG 菜单图标
一排 SVG 图标，鼠标移上去那一个才浮起半透明的磨砂层。纯 CSS 加 SVG，不用 JavaScript。
它的价值在「按需」：整条导航都毛玻璃会抢内容的注意力，只让被指到的那一项起雾，成本和干扰都低得多。
03. 照片上压文字的那块磨砂底
这一款解决的是很具体的一件事：banner 图上要压一行标题，图片本身花花绿绿，文字怎么都读不清。传统办法是加一层黑色半透明蒙版，代价是整张图都变暗；这里只在文字那一块做实时模糊，图的其余部分保持原样。
顺手记一个数：WCAG 的 1.4.3 条要求正文文字与背景的对比度至少 4.5:1，大字号（18pt 或 14pt 加粗以上）可以放宽到 3:1。毛玻璃底上的文字对比度是跟着底图变的——换一张浅色配图就可能掉到 3:1 以下。所以这类效果落地时，配图不能随便换。
04. 磨砂个人资料卡
人物背景图、个性签名、粉丝数、关注按钮，压在一块半透明卡片里，响应式已经写好。社区、游戏站、个人主页的用户卡拿去改文案就行。
它是单卡设计，页面上只放一张没问题；要一排排铺开，先看下一款——并排的毛玻璃卡片是另一个问题。
05. 一排卡片挨在一起，为什么会发白
这是做毛玻璃卡片组最容易撞上的那个问题：单张卡片好看，三张并排一放，交界处糊成一片，整体泛白，文字也跟着变淡。原因是各张卡片的模糊区互相叠加。
作者给这一套的说法是「无重叠模糊背景」——让每张卡的模糊区互不干扰，所以并排放也不发白。效果对不对，打开预览把窗口拉窄、让几张卡挤到一起看一眼就知道，这是最容易验的一类承诺。要做金融仪表盘、多任务面板这种「一屏好几块玻璃」的界面，从它起手能省掉一整轮调参。
06. 磨砂文件夹，悬停扇形展开
半透明文件夹外壳收着几张照片，鼠标移上去照片呈扇形浮出来。纯 CSS，用 transform 做展开。摄影作品集、云相册的分类入口用它，比平铺一整屏缩略图省空间。
07. 灯管底下的多层玻璃卡
同一档里最「重」的一款：不止一层玻璃，层与层之间还有慢慢晃动的光带扫过。第一档里只有它能做出接近第二档的观感，靠的是多层叠加而不是折射。
它适合首页上那一两个需要抢眼的卡位，不适合铺满整页——多层模糊叠在一起，滚动时掉帧的概率明显上升。
第二档 · 把「液态」一层层堆出来
这一档不做真折射，而是用多层渐变、边缘高光、内阴影、透明度分布，把「厚度」和「流动」画出来。观感离 iOS 26 最近，同时跨浏览器还稳——因为它用的全是老牌 CSS 能力。第一档做不出厚度，第三档塞不进侧边栏，这一档的存在理由就是这个夹缝。
08. iOS 26 液态玻璃卡片：纯 CSS 版
圆角卡片浮在一张繁复的花卉背景上，表面柔和模糊、边缘一圈轻微反光。整套只用 backdrop-filter 和 blur 这类现代 CSS 特性，不写一行 JavaScript。
拿它当「液态玻璃到底长什么样」的参照最合适。看完它再去看第三档的第 17 款，两者的差别就是本文开头那件事：一个把背景磨毛了，一个把背景掰弯了。
09. 带脉动反馈的 Liquid Glass 控件组
上一款是一块玻璃，这一款是一组：图标和控件各自悬浮在背景之上，半透明蒙层加边缘高光，鼠标悬停或点击时元素会轻微脉动，像液体在玻璃面上晃了一下。
那个脉动是这一款真正的差异点。静态截图里两款看着差不多，动起来「活」的是它。做 App 落地页、产品介绍页的控件展示区可以直接用。
10 & 11. 两套液态玻璃组件库，规格几乎一样
搜「液态玻璃组件库」想要的是这种东西：不是单个 demo，而是一整套能直接搭界面的组件。两套都是纯 CSS、零第三方依赖。资源页给出的规格也几乎一样：完整的设计令牌体系、15 个以上常用组件、明暗双主题、12 种玻璃专属动效，并都声明做了无障碍适配和样式降级——后两项是有验收标准的，真要用在正式项目上，自己拿键盘 Tab 一遍、再把 backdrop-filter 关掉看一眼更稳妥。
说实话，两套的规格描述重合度很高，上传时间差两个月。不必都下——打开预览看哪一套的圆角、模糊强度和高光更接近你的设计稿，挑一套就够了。下面这张是另一套：
两套里「设计令牌」这一项值得单独说一句：玻璃效果里的模糊半径、透明度、边框亮度、阴影层数是联动的，散在各个组件里改一次要改十几处，抽成令牌之后改一个变量整套跟着走。单个 demo 给不了这个。
12. 液态玻璃下拉菜单：它用了一个 2025 年才能用的新特性
原生 <select> 展开后那个列表，过去是浏览器自己画的，CSS 管不着——这也是十几年来大家宁愿用一堆 div 模拟下拉框的原因。这一款用的是 appearance: base-select，浏览器交还样式控制权的新开关，所以它是真的 <select>，键盘操作、表单提交、移动端原生行为全都还在，外观却是液态玻璃的。
代价写在兼容表里：caniuse 上这个特性的全球支持率是 71.56%，Chrome/Edge 135 以后、Safari 27 以后支持，Firefox 到 159 版都还默认关闭。所以它适合两种场合：内部系统（浏览器可控），或者接受「Firefox 用户看到的是原生样式」这个降级结果。不接受降级的话，看下一款。
13. 不挑浏览器的那个半透明下拉框
老办法，但干净：不套外层包装元素，靠 CSS 变量改样式，去掉默认外观，加一个 SVG 箭头和渐变半透明背景，零 JavaScript。它只改了「收起状态」的外观——而收起状态恰好是用户 99% 时间看到的那个状态。
要在真实业务表单里用玻璃风下拉框，我更建议这一款。它不漂亮到惊人，但到处都能跑。
14. 悬停会弹一下的液态导航栏
鼠标移进菜单项，那一项像果冻一样跳一下再落定，配半透明玻璃底。CSS 加 JavaScript，整体很简约。
这类弹跳有个用法上的限制：菜单项多了以后，一路划过去会连着弹七八下，很吵。适合 4～6 项的品牌站顶栏，不适合项目一长排的门户。
15. 会黏在一起的水滴菜单
菜单项是几颗半透明水滴，点下去它们会带着重力感聚到一起、黏成一团。毛玻璃背景来自 CSS 滤镜，那股「黏」是 JS 里的重力模拟算出来的。
它在这一档里最偏「玩」：作者自己给的定位是弱化菜单存在感、但保留强交互的场合——创意作品集、移动端 H5 那种。企业官网的主导航别用它，找不到入口的用户会比被取悦的用户多。
16. 玻璃质感银行卡：一个绕开性能陷阱的做法
一张半透明的 Visa 卡，交互时有细腻的动画。真正值得学的是作者的取舍：他没有用 SVG 模糊滤镜，而是预先做了一张模糊处理过的 JPG，再用卡片形状去遮罩它，动画交给 GSAP。
为什么这么干？实时模糊是每一帧都要重算的，卡片一旦跟着鼠标转起来，代价直接体现在帧率上；换成一张静态图去遮罩，观感几乎一样，但每帧只是在搬一张位图。做「html 银行卡样式」「卡包滚动」这类需要连续动画的卡片效果，这个思路比效果本身更值钱。
第三档 · 背景真的被弯折了
到这一档才有开头说的那个「掰弯」。代价是明确的：要么上 WebGL 和着色器，要么把整块视觉交给 SVG 路径去画，而且这四款都是整屏级的东西，不是一个能塞进侧边栏的组件。它们的正确位置是首页首屏。
17. Three.js 液态玻璃气泡：会粘连融合的那种
Three.js 加 WebGL，气泡用的是 Metaball（一种把多个球体的「影响力场」加在一起求表面的画法，两团靠近时表面会自动连成一片，所以看起来像水银或者肥皂泡）：两颗气泡靠近会自然粘连融合，拖得动，点画布还能生出新的。
它的折射是真的——每颗气泡边缘有高光和内凹，背景颜色穿过气泡时是弯的，不是模糊的。作者自己把这一点和常规 backdrop-filter 方案做了对比，说视觉层次高出不少，这个判断我同意。品牌官网的视觉大屏、产品发布页值得为它单开一屏。
18. 不用 WebGL 的折射：整屏只有一张风景照
暖米色首屏，左边标题和按钮，右边悬着三只被捏过的不规则玻璃液滴，泡里映着山脉云海，最大那只外缘还有一圈顺着轮廓滚动的文字。鼠标移动时三只泡以不同倍率浮动，最小的动得最快。
整屏没有一张 3D 渲染图：气泡形状是 SVG 路径，玻璃质感由多层滤镜和渐变叠出来，环绕文字用路径文字，视差是几行脚本。除了那张风景照，其余全是矢量。
这是第三档里唯一「便宜」的一款——不引 Three.js，也不用写着色器。想要折射观感但不想背 WebGL 的包袱，先看它。
19. WebGL 折射晶体首屏
WebGL 加 GLSL 着色器渲出一片晶莹的折射晶体，上面压一层玻璃拟态的 UI；鼠标移动时画面产生视差，像在三维空间里穿行。一整套 Hero 区布局已经配好，文案位和按钮都在。
它和上一款的分工很清楚：这一款是「场景」，前一款是「元素」。要做科技、创意、高端品牌的首页首屏，从这一款切；要在一个正常排版的页面里加两三个玻璃元素，别用它。
20. 雨天玻璃：折射用在天气上
WebGL 加 Glassmorphism 做的雨天窗玻璃：雨滴的折射、流淌、聚合都是实时算的，不是一张动图。背景可换自己的图片或视频，模糊度、亮度、雨量、色调都能调，上面浮着毛玻璃的时钟和实时天气。
放进这一档是因为它的雨滴是真折射：水珠所在的那一小块背景是被挤变形的，不是被模糊的，所以流下去的时候能看出画面在跟着拉扯。这是整篇里最容易一眼看懂「折射和模糊差在哪」的一款。
要提醒的是，实时渲染的雨滴一直在跑，笔记本上会持续吃 GPU。它适合「打开就一直开着」的那种页面，不适合挂在一个用户只停留十秒的落地页上。
如果只打算做一件事：打开第二档里的任意一款先看。九成的网站最后都落在那一档——观感够用，而且到哪儿都跑得起来。确认它撑不住你的设计稿，再上第三档，同时接受它只能占一整屏这个前提。
选定之后，上线前还有两个检查，都只要一分钟。
第一个，换浏览器打开。第一档和第二档基本不用担心，前者有 96% 的支持率，后者用的全是老牌属性。
要盯的是一种写法：代码里出现 backdrop-filter: url(...) 的，必须在 Safari 和 Firefox 里各开一次。按前面那条兼容记录，这两家不会给你折射，页面会退化成一块普通的半透明板子。你要确认的是退化之后还能不能看。
第二个，把配图换成一张浅色的。玻璃是透明的，意味着文字的对比度是由底图决定的，不是由你的 CSS 决定的。设计稿上那张深色夜景背景下 4.5:1 达标的白字，换成一张雪景配图就不达标了。运营后期换 banner 图不会来问前端，所以这一步要在交付前自己做一次。
以上二十款都可以在童哲网前端特效资源里打开预览逐个对比。要把玻璃用在导航栏这个位置上，11 款导航栏与菜单效果那篇里还有吸顶指示器、环形展开这些别的路子；玻璃卡片和 Bento Grid、3D 倾斜怎么搭，看10 款卡片与布局效果；第三档那两款 WebGL 的同类，在14 款 Three.js 与 WebGL 网页 3D 特效里还有一批；要做毛玻璃登录页，14 款表单与登录界面效果那篇更对口。
