Background Texture Maker
This page generates CSS for textured backgrounds. Play with the sliders to preview it here. Copy/paste the code into your stylesheet to apply it to your site.
Details
-
The texture comes from an SVG that's encoded for use as a CSS background-image.
-
The SVG and the CSS background-size are both set to 150px x 150px. This prevents the texture from changing at different page sizes.
-
The Lightness, Chroma, and Hue sliders set the base background variables for an oklch color.
-
The Texture slider controls how strong the textured effect is.
-
The original version of this tool used base64 encoding. Tyler Sticka reminded me that that's not necessary for SVGs. The output is escaped plain-text now as a result.
Outro
The textured effect can go from barely perceptible to in your face. I'm leaning toward the subtler site. That's not to dismiss the more overt. I expect to change things up from time to time. I hope you enjoy experimenting with it too.
-a
P.S. At press time, I have a little text-shadow on the page to add some separation to the prose. It's set to compliment a darker palette. It's not dynamic. That can make it look weird with different background colors. Especially as they get lighter.
The shadow isn't part of the CSS payload from the tool. Playing with it is left as an exercise for the reader.