gggrain
grainy SVG gradient generator

🌈 This SVG generator makes it easy to add an analog/organic touch to your gradients by introducing some coarse grain. It makes for a great way to add texture and dimension to your designs.

🙌 The idea for this gradient generator was inspired by this great CSS-Tricks article from Jimmy Chion.

This gradient generator makes use of SVG filters like feTurbulence for generating noise and feComponentTransfer as well as feColorMatrix to tweak the noise so that it looks nice and grainy. If you're interested in geeking out a bit more on the topic, I recommend this CSS-Tricks article.

The resulting SVG files are lightweight in size, but they can require a lot from the CPU to render because of the way SVG filters work. To counter this if it's an issue in your specific use case, an easy option is to turn the resulting gradients into a raster image format like JPEG, WebP or AVIF. You can use a tool like rrrasterize to do that right in the browser.

🎨 If you'd like a more detailed color picker for the gradient color selection, I've built a color picker tool that can help with just that.