alanwsmith.com |

Background Texture Maker

give your site a little grit

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

Texture SVG Source

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.)