Noise Texture Background with SVG

December 10, 2023

I’ve seen a new trend pop up: noise texture backgrounds.

ped.ro
cadence
bentogrids

Here’s how I’ve implemented it in this very site. Credits to: https://ped.ro

First add that HTML bit at the top of your page (or in a layout component if you’re using a framework like Next):

<svg id="texture">
    <filter id="noise">
        <feTurbulence
            type="fractalNoise"
            baseFrequency=".8"
            numOctaves="4"
            stitchTiles="stitch"
        ></feTurbulence>
        <feColorMatrix type="saturate" values="0"></feColorMatrix>
    </filter>
    <rect width="100%" height="100%" filter="url(#noise)"></rect>
</svg>

And then add that bit of CSS for extra styling:

#texture {
    position: fixed;
    inset: 0;
    z-index: 999;
    width: 100vw;
    min-height: 100vh;
    opacity: 0.2;
    pointer-events: none;
    filter: contrast(80%) brightness(100%);
}

Done. Much simpler than I expected.