Web Tools tools.bryantsmith.com

Images & SVG

SVG Background Generator

Pick a pattern, tweak the colours and spacing, and watch it tile below. Copy the production-ready SVG or CSS data URI when it looks right — everything stays in your browser.

Runs in your browser v1.0.0

Pattern settings

Dots

Pattern

Colours

Colour presets

Spacing & scale

Live preview

tiles infinitely

Output

Preview updates live as you change the pattern.


                    

                        
                        
                        
                        
                    

                

            

        

    


    

        

            
How it works

        

        

            

                Each pattern is a single tile of raw SVG built from your settings. Because the tile is
                drawn to repeat seamlessly, the same markup works as an inline SVG file or as a
                background-image data URI. The optional share link stores your settings in
                the URL fragment, which never leaves the browser.
            

        

    




Related tools
  • Base64 Image ConverterConvert an image to a Base64 data URI or decode a data URI back into a downloadable image — all in your browser.
  • Favicon GeneratorTurn one source image into favicon.ico, PNG icons, a web app manifest and copy-ready HTML link tags — entirely in your browser.
  • Placeholder Image GeneratorGenerate downloadable placeholder images at exact sizes with custom labels and colors — entirely in your browser.
  • Responsive Image GeneratorPlan responsive image variant widths and generate ready-to-paste srcset, sizes and img markup — entirely in your browser.
  • SVG to Data URIEncode SVG markup into a URL-encoded or Base64 data URI for CSS and HTML, entirely in your browser.
  • Image CompressorCompress images in your browser with a live before/after quality comparison and instant size savings.
More Images & SVG tools