grainy SVG gradient generator
blend mode ↷
Some sample grainy gradient backgrounds generated using gggrain ↷
🦄 Let me help you make your website or landing page better. I'll review your website for improvement opportunities in terms of layout, design, performance, on-site SEO & marketing message✨ Show me how to improve my website
📈 I'm using Fathom Analytics, a simple privacy-focused website analytics service. I've been really happy with it over the years and really glad I made the switch.
✨ Try it out free for 7 days, plus get an additional $10 credit by using my affiliate link.
🙀 I'll receive a commission if you decide to continue using Fathom, so you'll be helping support fffuel at the same time.
🌈 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.
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.