純 SVG 噪聲背景：用 feTurbulence 做出質感雜訊效果

不需要圖片或 canvas，只用 SVG 濾鏡與 Tailwind CSS 就能做出噪聲背景。詳解 feTurbulence、feFlood、feComposite 的運作原理與顏色調整技巧。

CChia1104
筆記2 分鐘閱讀

最近在 X 上看到有人分享直接透過 html 的 svg 效果做到噪聲背景效果，以往在做類似的背景效果最簡單的做法就是直接透過圖片做基底來完成，或是自己寫 GLSL 透過相關演算法完成 canvas，也感謝 @guerriero_se 分享的 svg 作法。

noise-svg

<figure
    class="pointer-events-none absolute inset-0 z-10 opacity-10 mix-blend-screen filter-[url('#noise-bg-fx')_grayscale(100%)]"
    aria-hidden="true">
    <svg>
        <filter id="noise-bg-fx">
            <feTurbulence baseFrequency="0.8" />
        </filter>
    </svg>
</figure>

CSS 效果

Class作用
mix-blend-screen混合模式 screen，與下層做「變亮」混合：黑色不影響、亮的雜訊點打亮下層，質感比直接蓋上去自然
filter-[url('#noise-bg-fx')_grayscale(100%)]Tailwind 任意值語法。套兩個 filter：先用 SVG 濾鏡 #noise-bg-fx，再 grayscale(100%) 去色變成灰白雜訊（_ 是 Tailwind 裡空格的寫法）

SVG 濾鏡部分

  • feTurbulence：用 Perlin noise 演算法程式化生成「亂流/分形雜訊」紋理，不需要任何圖片檔。
  • baseFrequency="0.8"：雜訊的頻率。值越大顆粒越細密、越像細沙；值越小則是大塊雲霧狀。0.8 偏高，所以是細緻的顆粒感。

顏色調整

feTurbulence 預設會在 R/G/B/A 四個通道各自生成雜訊，所以 它本來就是彩色的，前面用了 grayscale(100%) 把它壓成灰階。

這裡可以透過 SVG feFlood 和 feComposite 來做填色，先把雜訊當成 透明度遮罩，再灌入你要的顏色

figure 的 grayscale(100%) 也可以移除了

<figure
    class="pointer-events-none absolute inset-0 z-10 mix-blend-screen filter-[url('#noise-bg-fx')]"
    aria-hidden="true">
    <svg>
        <filter id="noise-bg-fx">
            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" result="noise" />
            <!-- 取雜訊的某通道當 alpha -->
            <feColorMatrix in="noise" type="matrix"
                    values="0 0 0 0 0
                    0 0 0 0 0
                    0 0 0 0 0
                    1 0 0 0 0" result="mask" />
            <!-- 灌入你要的顏色，例如藍色 -->
            <feFlood flood-color="#3b82f6" result="color" />
            <feComposite in="color" in2="mask" operator="in" />
        </filter>
    </svg>
</figure>

Written by: Chia1104 CC BY-NC-SA 4.0

頁面

聯絡

Chia1104
©
Chia1104