用 CSS 和 SVG 实现一个会呼吸的渐变背景

引言

最近在重构个人博客的首页，总觉得纯色背景太单调，渐变背景又太静态。我想要的是一种“活”的感觉——背景像有生命一样，缓慢地、柔和地变化，就像人在呼吸。试了几种方案，最后发现用 CSS 配合一个简单的 SVG 滤镜就能实现，效果出奇地好，而且性能开销极小。今天就把这个小技巧分享出来。

从 SVG 的 feTurbulence 说起

很多人对 SVG 滤镜的印象还停留在“复杂”“难调试”，但其实有一个滤镜特别适合做有机纹理——feTurbulence。它能生成 Perlin 噪声，就是那种像云朵、烟雾、水波纹一样的随机图案。配合 feColorMatrix 和 feBlend，我们可以把这种噪声叠加到渐变背景上，让颜色产生微妙的流动感。

核心代码其实就几行：

<filter id="noise">
  <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" result="noise"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.15 0" in="noise" result="coloredNoise"/>
  <feBlend in="SourceGraphic" in2="coloredNoise" mode="screen"/>
</filter>

这里 baseFrequency="0.01" 控制了噪声的“颗粒大小”，数值越小纹理越平滑。numOctaves 决定细节层次，3 层就够用。feColorMatrix 把灰度噪声的透明度压到 0.15 左右，这样叠加后不会太抢眼，只是给背景增加一点“呼吸感”。

让渐变动起来

有了噪声纹理，下一步是让渐变本身动起来。CSS 的 @keyframes 配合 background-position 或 background-size 就能实现缓慢的位移效果。我通常这样写：

body {
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-size: 200% 200%;
  animation: breathe 20s ease infinite;
}

@keyframes breathe {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

20 秒一个循环，渐变中心缓慢移动，配合 SVG 噪声的静态纹理，视觉上就像背景在“呼吸”。如果你想让效果更丰富，可以叠加两层不同方向和速度的渐变，用 mix-blend-mode 混合。

实际应用中的小坑

第一次实现时，我直接把 SVG 滤镜用 url() 引用到 CSS 背景上，结果发现 Chrome 和 Safari 的渲染效果不一样。Safari 对 feColorMatrix 的透明度处理更保守，导致噪声几乎看不见。解决办法是：把 SVG 滤镜内联到 HTML 中，然后用 filter: url(#noise) 直接作用于一个覆盖全屏的伪元素上。

另一个坑是性能。feTurbulence 在移动端如果 numOctaves 设太高（比如 5 以上），滚动时会明显掉帧。建议保持 2-3 层，并且用 will-change: transform 提示浏览器优化。

最终的结构大概是：

<div class="bg-noise"></div>

.bg-noise {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-size: 200% 200%;
  animation: breathe 20s ease infinite;
}

.bg-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: url(#noise);
  pointer-events: none;
}

这样噪声层不占文档流，不影响交互，而且可以单独控制透明度。

写在最后

这个技巧其实不新鲜，很多设计网站都在用，但自己动手实现一遍，才能真正理解 SVG 滤镜和 CSS 动画配合的妙处。它不需要任何 JavaScript，纯声明式就能让页面“活”起来。下次做个人项目或博客时，不妨试试给背景加一点呼吸感——用户可能说不清哪里好，但就是会觉得页面更舒服、更有温度。

如果你有更好的实现方式，或者遇到过其他坑，欢迎留言交流。