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

  • 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.
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 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 · Self-taught Web Developer
Seems like a great idea. On Firefox 58, I'm getting an error whenever selecting any background to preview: .
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 · Self-taught Web Developer
@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 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.
Chris FrantzPro@frantzlight · Building presskite.com
Instant bookmark.
Ben Flowers@benoj · Platform Engineer @ Wrisk
Also seen the issue described by @sromana14 - looks really cool though!