Subscribe
Sign in
SVG Background Generator
p/svg-background-generatorCustomize, scalable backgrounds and patterns for free
Start new thread
Matt Visiwig

SVG Background Generator - Customize, scalable backgrounds and patterns for free

by

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.

Add a comment

Replies

Best
Cedric Amaya
Seems like a great idea. On Firefox 58, I'm getting an error whenever selecting any background to preview: .
Matt Visiwig
Maker
@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
@sromana14 @bumpsetcreative works like a charm! 👍
Sromana Mukhopadhyay
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 Visiwig
Maker
Hopefully this should be fixed now, thanks for pointing it out @sromana14, I appreciate you posting the workaround while I sorted it out.
Abadesi
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 Visiwig
Maker
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.
Saxon Brooker
its not working on my website, it just shows up with a colour "https://saxobroko.ga/indent"
Matt Visiwig
Maker
@saxon_brooker Inline CSS will not work, you must do something like: body { ***past code here*** } SVGBackgrounds.com outputs SVG code using both single and double quotes code, and will not play nice inside style tags ( style=' xxxx ' or style=" xxxx " ).
Matt Visiwig
Maker
@saxon_brooker It removed code around the body {***past code here***}. Working on a quick and dirty demo page. I'll share in 20 minutes.
Matt Visiwig
Maker
@saxon_brooker Here is the demo on how to use the code: https://www.svgbackgrounds.com/demo
Edward Vasquez
great tool but i have also an error :S : Uncaught TypeError: Cannot read property 'getElementsByTagName' of null at selectBG (svg-editor.js:118) at svg-editor.js:1252 Mac, Chrome Version 63.0.3239.132
Matt Visiwig
Maker
@edwardvasquezdr hopefully your issue is addressed, this is likely connected to the other posted issues which I fixed.
Chris Frantz
Instant bookmark.
Ben Flowers
Also seen the issue described by @sromana14 - looks really cool though!
Appy
This is really awesome! Thank you 😄
Chris Buttenham
This is awesome! Been waiting for something like this for awhile :)
Steve Luvender
Nice work! Love the scarf photo at the bottom of the page, too.
Ves
Great implementation and love the idea! Would be nice if one can also download the final SVG as well.
Matt Visiwig
Maker
@vesln Thanks for the kind words! I'll look into that feature... I do plan to add more functionality and more background designs.
Vladimir Leytus
@vesln @bumpsetcreative second that request, would be awesome to download SVGs!
Vincent Soo
Useful Products! Bookmark
Steven J. Selcuk
God damn good man! 🤜🏻 🤜🏻 🤜🏻 Let's create some card with display: grid; 🙌🏻
Ghost Kitty
Comment Deleted
David A. Lindahl
This looks fantastic! I love using SVGs in CSS as backgrounds!
Bharath B Lohray

Great tool for quick SVG backgrounds. Wish there were more patterns.

Pros:

Quick and easy way to generate SVG backgraunds.

Cons:

Only 30 base patterns to work with.

Christina Martin
Well done guys :) free...
Daniel Weibel

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).

Pros:

Generated backgrounds are simply amazing

Cons:

Colour picker could be more sophisticated

M Snyder

Love the UI and utility, amazing product thank you for the contribution

Pros:

Great and easy to use

Cons:

Direct svg or png download please?

Ribier Design
good