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

Reviews

  • 849104
    Daniel WeibelSoftware Engineer
    Pros: 

    Generated backgrounds are simply amazing

    Cons: 

    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

    Cons: 

    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.

Discussion

You need to become a Contributor to join the discussion - Find out how.
1154083
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.
1174378
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: .
1174378
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! 👍
269621
AbadesiHiring@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 🙂
1174378
Matt LipmanMaker@bumpsetcreative · Creative Director at Bump Set Creative
Hi @abadesi, I started SVGBackgrounds.com 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.
163658
Chris Frantz@frantzlight · presskite.com 👀
Instant bookmark.
982082
Ben Flowers@benoj · Platform Engineer @ Wrisk
Also seen the issue described by @sromana14 - looks really cool though!