动态网格渐变背景（CSS 渐变网格动画，带噪点纹理）

效果演示（真实可交互）

「流动速度」控制团块的变形节奏，拖到 0 画面即凝固；「色相偏移」让整幅配色整体旋转，蓝紫瞬间变橙红；「噪点密度」控制表面颗粒感的强弱。实现思路是六块不同渐变方向的彩色团块，同时做 border-radius 变形、位移、旋转和缩放四种动画，再叠加一层用内联 SVG feTurbulence 生成的噪点纹理，让渐变不再是光滑的塑料感，而是接近真实摄影颗粒的质感。全部由 CSS 完成，不占用主线程，非常适合作为科技感落地页的全屏背景。

完整代码

<div class="mesh-bg">
  <div class="blob b1"></div>
  <div class="blob b2"></div>
  <div class="blob b3"></div>
  <div class="blob b4"></div>
  <div class="blob b5"></div>
  <div class="blob b6"></div>
  <div class="grain"></div>
</div>

.mesh-bg {
  position: relative; width: 100%; height: 340px; overflow: hidden;
  background: #0a0d16; --dur: 9s;
}
.blob {
  position: absolute; width: 55%; height: 65%;
  filter: blur(34px); mix-blend-mode: screen; opacity: .85;
  animation: blobMorph var(--dur) ease-in-out infinite alternate;
}
.b1 { left: -12%; top: -18%; background: linear-gradient(135deg, #7c3aed, #ec4899); }
.b2 { right: -14%; top: -8%;  background: linear-gradient(135deg, #06b6d4, #6366f1); animation-delay: -3s; }
.b3 { left: 20%; bottom: -30%; background: linear-gradient(135deg, #f59e0b, #ef4444); animation-delay: -6s; }
.b4 { right: 6%; bottom: -24%; background: linear-gradient(135deg, #10b981, #22d3ee); animation-delay: -1.5s; }
.b5 { left: 38%; top: -22%; background: linear-gradient(135deg, #f472b6, #a855f7); animation-delay: -4.5s; }
.b6 { left: -8%; bottom: -12%; background: linear-gradient(135deg, #3b82f6, #14b8a6); animation-delay: -7.5s; }

@keyframes blobMorph {
  0%   { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; transform: translate(6%,-5%) rotate(30deg) scale(1.15); }
  100% { border-radius: 38% 62% 55% 45% / 60% 40% 55% 45%; transform: translate(-6%,6%) rotate(-25deg) scale(.92); }
}

/* SVG 噪点纹理：feTurbulence 生成，覆盖层混合 */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

// 演示面板控制：速度 / 色相 / 噪点
const wrap = document.querySelector('.mesh-bg');
const sp = document.querySelector('#msSpeed');   // 0-300，默认 120
const hue = document.querySelector('#msHue');    // 0-360
const gr = document.querySelector('#msGrain');   // 0-100，默认 35
if (sp) sp.addEventListener('input', e => {
  wrap.style.setProperty('--dur', `${(18 - +e.target.value / 300 * 15).toFixed(1)}s`);
});
if (hue) hue.addEventListener('input', e => wrap.style.filter = `hue-rotate(${e.target.value}deg)`);
if (gr) gr.addEventListener('input', e => {
  wrap.querySelector('.grain').style.opacity = `${+e.target.value / 100 * .6}`;
});

参数说明

兼容性与性能

• mix-blend-mode 需要 Chrome 41+ / Safari 8+ / Firefox 32+；filter: blur() 需要 Chrome 53+ / Firefox 35+，均无前缀。
• 内联 SVG data URI 噪点无额外网络请求，首屏零请求即出效果。
• 动画仅涉及 transform、border-radius、opacity，性能可控；低端设备可减少团块数量或把 blur 降到 24px。
• 注意：filter 与 mix-blend-mode 同时作用时会触发离屏渲染，层数建议控制在 8 层以内。
• 尊重 prefers-reduced-motion 的用户可在媒体查询里停用 animation，保留静态网格渐变。

常见问题

Q: 团块边缘有生硬的方形边框怎么办？ 团块要刻意超出容器边界（left/top 设为负值），配合 overflow: hidden 裁掉，边缘就会是自然的模糊过渡。

Q: 为什么我的噪点看起来是灰色的格子？ 那是 feTurbulence 的 baseFrequency 太小或图片尺寸不合适。保持 baseFrequency 0.9、图块 140×140 左右，并用 mix-blend-mode: overlay 叠加即可。

Q: 想在渐变上放正文，会不会看不清？ 建议给文字容器加半透明深色底（如 rgba(5,10,20,.55) + backdrop-filter）或直接放在背景区域之外，避免与亮色团块重叠。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创实现，无任何第三方依赖，免费商用无需署名。