January 2026
Make a Textured Site Background with an SVG
There's A Tool For It
I built a tool to make it easy to make your own textured backgrounds. It's here:
texture.alanwsmith.com
The Background
I've added some texture to the background of my site. I'm doing it using an SVG embedded in CSS as a data url.
The overall code looks like this:
:root {
--bg-lightness: 0.35;
--bg-chroma: 0.1;
--bg-hue: 260;
}
body {
background-color: oklch(var(--bg-lightness) var(--bg-chroma) var(--bg-hue));
background-size: 150px 150px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTUwIDE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZUZpbHRlciI+CiAgICA8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMyIgbnVtT2N0YXZlcz0iMiIgcmVzdWx0PSJub2lzZSIgLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiIHJlc3VsdD0iZ3JheXNjYWxlIiAvPgogICAgPGZlQ29tcG9uZW50VHJhbnNmZXI+CiAgICAgIDxmZUZ1bmNBIGluPSJncmF5c2NhbGUiIHR5cGU9ImxpbmVhciIgc2xvcGU9IjAuNCIgcmVzdWx0PSJ1cGRhdGVkIiAvPgogICAgPC9mZUNvbXBvbmVudFRyYW5zZmVyPgogICAgPGZlTWVyZ2U+CiAgICAgIDxmZU1lcmdlTm9kZSBpbj0ibm9pc2UiIC8+CiAgICAgIDxmZU1lcmdlTm9kZSBpbj0idXBkYXRlZCIgLz4KICAgIDwvZmVNZXJnZT4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjIiIGZpbHRlcj0idXJsKCNub2lzZUZpbHRlcikiLz4KPC9zdmc+);
}
The source of the SVG looks like this:
<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
<filter id="noiseFilter">
<feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="2" result="noise" />
<feColorMatrix type="saturate" values="0" result="grayscale" />
<feComponentTransfer>
<feFuncA in="grayscale" type="linear" slope="0.4" result="updated" />
</feComponentTransfer>
<feMerge>
<feMergeNode in="noise" />
<feMergeNode in="updated" />
</feMerge>
</filter>
<rect width="100%" height="100%" opacity="0.3" filter="url(#noiseFilter)"/>
</svg>
It gets run through a base64 encoding process so that it fits in the CSS url().
The key is the opacity in the SVG. Low numbers work better for dark backgrounds. Higher numbers do well with the lighter background colors.
Notes
-
The texture looks better with my current dark mode colors than it does with the light mode.
-
The noise filter makes a black and white image. Mixing it in for my dark background makes the overall appearance lighter. I tried using various
background-blend-mode settings. The hard-light made things a little better.
I really like the look of the texture. It makes the site feel more tangible.
-a