CSS 液态效果生成器

基于 SVG filter 实现 gooey 粘性融合效果，可视化调参与代码导出

参数设置与预览

拖动滑块实时调整效果，复制下方 CSS 代码即可使用

feGaussianBlur stdDeviation

feColorMatrix alpha 系数

每个圆的直径

圆的数量 (2-8)

点击色块可快速预设

每个圆运动周期时长

实时预览
CSS 代码
完整可复制粘贴使用
/* 调整参数后将在此输出 CSS 代码 */
广告位

使用说明

  1. 调整"模糊半径"控制融合的扩散程度（值越大融合越明显）
  2. 调整"对比度阈值"控制边缘锐化强度（一般 15-25 之间效果最佳）
  3. 设置"圆大小"和"元素数量"决定融合体的整体形态
  4. 选择主色或点击预设色块快速换色
  5. 预览区可点击"暂停动画"查看静态效果
  6. 点击"复制 CSS"获取完整代码，包含 SVG filter 与 CSS 样式，可直接粘贴到项目中使用
  7. 所有计算与渲染在浏览器本地完成，无需联网

适用场景

  • 创意着陆页：液态加载动画、品牌 Logo 流体效果
  • 导航菜单：粘性下拉菜单的融合过渡效果
  • 滑块与切换器：圆形 toggle、tab 指示器流体切换
  • 数据可视化：动态气泡融合、网络节点连接动画
  • 节日主题页：水滴、雨滴、节日装饰元素融合动画

安全保障

  • 本地渲染：SVG filter 与 CSS 全部在浏览器本地执行
  • 隐私保护：不收集、不存储任何配置参数
  • 无网络请求：参数调整不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

液态效果的原理是什么？

基于 SVG filter 的两步处理：先用 feGaussianBlur 对元素做高斯模糊（让边缘扩散），再用 feColorMatrix 操作 alpha 通道做对比度锐化（让模糊后的半透明像素要么变全透明、要么变全不透明），从而形成"粘性融合"的边缘。当多个圆相互靠近时，模糊区域叠加使阈值超过临界值，看起来就像液体融合在一起。

模糊半径和对比度阈值如何搭配？

模糊半径控制扩散范围，值越大融合距离越远（但过大会有锯齿）。对比度阈值控制锐化强度，值越大边缘越硬。常见组合：模糊 6-12 + 阈值 17-22。如果效果不明显可适当增大模糊半径；如果边缘出现颗粒感，可降低模糊或调高阈值。

为什么我的圆没有融合？

请检查容器是否设置了 filter: url(#goo)，且 SVG filter 的 id 与容器引用一致。如果元素距离过远则不会融合（这是正常的物理效果），可以适当增大模糊半径或调整动画让圆相互靠近。注意：filter 只对容器的直接子元素生效。

浏览器兼容性如何？

SVG filter 与 CSS filter: url() 在现代浏览器（Chrome、Firefox、Safari、Edge 近 5 年版本）中支持良好。iOS Safari 14+ 完整支持。在 IE 中不支持，需要降级处理。建议为关键场景提供备选样式。