Background Texture Maker

Move the sliders below to set your background. Copy/paste the CSS when you've got it the way you want.

Details

• This tool generates CSS for a textured site background.
• The Lightness, Chroma, and Hue sliders set the base background variables for an oklch color.
• The Opacity slider controls the opacity of the texture SVG relative to the base color.
• The texture in the SVG is generated via SVG filters.
• The initial SVG filter values are hard coded. You can open the Texture SVG Source below the sliders to adjust it manually.
• The Copy button below the CSS copies the code to your clipboard for pasting into your stylesheets.
• Note that the background-size in the CSS is required to keep the browser from resizing the SVG tiles in a way that changes based on the content of the page. If you change the source SVG you'll want to manually adjust those values after you copy/paste the code.
• The page doesn't store your settings. You can refresh the page to reset the SVG if you mess with it and it breaks.
• The original version of this used base64 encoding. Tyler Sticka reminded me that that's not necessary for SVG. I yoinked some code from this repo by Taylor Hunt to do the necessary escaping. (See Optimizing SVGs in data URIs for details.)