SVG Background Generator

Customize, scalable backgrounds and patterns for free

get it
#4 Product of the DayFebruary 05, 2018

SVGs are small in file-size, high-definition, scalable, supported by modern browsers, and customizable, making them the perfect format for hero images. Create eye-catching backgrounds and patterns for your website or blog with this free tool that can manipulate color, shape, size, etc.... The output is CSS. No server requests or bulky files.

Around the web


  • Daniel Weibel
    Daniel WeibelSoftware Engineer

    Generated backgrounds are simply amazing


    Colour picker could be more sophisticated

    An incredibly useful tool. The SVG backgrounds you can generate are amazing, and you can customise the colours and other parameters, depending on the pattern. I used it to generate backgrounds for a landing page.

    The only thing that could be improved is to allow more options for defining colours (e.g. something like the macOS colour window).

    Daniel Weibel has used this product for one day.
  • Pros: 

    free, customizable colors and gradients


    A lot of bold pattern options

    This is a great tool for adding depth to a website via a patterned background. The fact that it's SVG format is a huge timesaver, in terms of not having to design for different platforms and screen sizes.

    Christina Dewey has used this product for one week.


You need to become a Contributor to join the discussion - Find out how.
Sromana Mukhopadhyay
Sromana Mukhopadhyay@sromana14 · Co-founder, SHUFFLUP
Plus one for the customization! *The preview is not working with Product Hunt reference url. To see the previews I had to remove '?ref=producthunt' from the reference url.
Matt Lipman
Matt LipmanMaker@bumpsetcreative · Creative Director at Bump Set Creative
Hopefully this should be fixed now, thanks for pointing it out @sromana14, I appreciate you posting the workaround while I sorted it out.
Cedric Amaya@cedricamaya · maker · open sourcerer · coffee lover
Seems like a great idea. On Firefox 58, I'm getting an error whenever selecting any background to preview: .
Matt Lipman
Matt LipmanMaker@bumpsetcreative · Creative Director at Bump Set Creative
@cedricamaya if you don't mind checking again, it should be fixed. @sromana14 picked up that the "?ref=producthunt" was causing an error and I made changes to the website accordingly. Thanks for posting.
Cedric Amaya@cedricamaya · maker · open sourcerer · coffee lover
@sromana14 @bumpsetcreative works like a charm! 👍
Abadesi@abadesi · 👩🏽‍💻 Product Hunt | Hustle Crew | NTT
Thanks for hunting @matthew_lipman please tell us more about your project - why you started it and where you hope to take it in future 🙂
Matt Lipman
Matt LipmanMaker@bumpsetcreative · Creative Director at Bump Set Creative
Hi @abadesi, I started because of my interest in SVGs (scalable vector graphics), a web image format that I believe to play a big role in the future of web design. Two months ago I attempted displaying a SVG as a background image, proving to be a difficult process that requires handling a giant blob of code. I saw the need for such a tool in my search for a better way. The website is far from complete, and I plan to add more patterns and improved functionality. I may add premium patterns in the future so I can invest more time into the project, but there will always be freebies. I'm smiling ear to ear with the feedback I've been receiving so far.
Chris Frantz
Chris Frantz@frantzlight · 👀
Instant bookmark.
Ben Flowers
Ben Flowers@benoj · Platform Engineer @ Wrisk
Also seen the issue described by @sromana14 - looks really cool though!