如何使用SVG还原颗粒感渐变背景

我在Figma里设计了一个带噪点/颗粒感的渐变背景视觉稿，用免费插件生成的效果独特有趣。现在开发阶段想精准还原这个背景，考虑到页面轻量化和性能，选择用SVG实现，但写的代码效果和设计稿差距很大，求有经验的开发者指点怎么高效还原。

我的现有代码：

CSS #

.grainy-background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter: url(#grainy);
  background: linear-gradient(120deg, #4183d7, #a754d6);
  opacity: 1;
}

HTML #

<div class="grainy-background-layer"></div>

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <filter id="grainy">
    <feTurbulence type="fractalNoise" baseFrequency=".537" numOctaves="4" stitchTiles="stitch"/>
    <feColorMatrix type="saturate" values="0"/>
    <feBlend in="SourceGraphic" mode="multiply"/>
  </filter>
</svg>

参考效果：带有细密颗粒质感的蓝紫渐变背景，颗粒呈现类似网格状分布，整体质感细腻且均匀覆盖在渐变之上。

你的核心问题是SVG滤镜的参数和混合模式未匹配设计稿的颗粒质感，调整以下参数可大幅贴近效果：

修改后的代码 #

CSS

.grainy-background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter: url(#grainy);
  background: linear-gradient(120deg, #4183d7, #a754d6);
}

HTML

<div class="grainy-background-layer"></div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <filter id="grainy">
    <!-- 生成更细腻的噪点，baseFrequency越小颗粒越细 -->
    <feTurbulence type="fractalNoise" baseFrequency="0.12" numOctaves="2" stitchTiles="stitch" result="noise"/>
    <!-- 去饱和转为灰度 -->
    <feColorMatrix type="saturate" values="0" result="gray-noise"/>
    <!-- 调整噪点的亮度、对比度，让颗粒更柔和适配渐变 -->
    <feComponentTransfer result="adjusted-noise">
      <feFuncR type="linear" slope="0.6" intercept="0.2"/>
      <feFuncG type="linear" slope="0.6" intercept="0.2"/>
      <feFuncB type="linear" slope="0.6" intercept="0.2"/>
    </feComponentTransfer>
    <!-- 用叠加模式混合，让噪点和渐变融合更自然 -->
    <feBlend in="SourceGraphic" in2="adjusted-noise" mode="overlay"/>
  </filter>
</svg>

参数说明 #

• baseFrequency：从0.537调到0.12，生成更细密的颗粒，避免原代码中颗粒过粗的问题
• numOctaves：从4降到2，减少噪点复杂度，让颗粒分布更均匀
• feComponentTransfer：通过调整slope（对比度）和intercept（亮度），让噪点不会太突兀，与渐变背景融合更自然
• 混合模式：把multiply换成overlay，保留渐变色彩层次的同时，让颗粒质感更贴合设计稿

如果需要更接近Figma里的网格状颗粒，可尝试把type="fractalNoise"换成type="turbulence"，再微调baseFrequency到0.1左右，能得到更偏向块状的颗粒分布。

内容的提问来源于stack exchange，提问作者Berk