KOENJP

SVG Pattern Background Generator

SVG · PATTERN

Make seamless background patterns — dots, grid, stripes, zigzag, waves, checker, hexagons and more. Adjust size, stroke, colors, rotation and opacity, then copy SVG code or a CSS data-URI background, or download a PNG tile.

Pattern

Preview

A seamless tile that repeats to fill any background.

Settings

Pattern
Background

Download


      

    


    
Runs in your browser only. Nothing is uploaded.

    
Good to know. With rotation, the CSS and SVG output stay rotated, but the tile PNG is saved without rotation. Use the large PNG if you need a rotated image.

  

  







  

    

      HOW TO
      
How to use

      
    
      
  1. Pick a pattern — dots, grid, diagonal stripes, zigzag, waves, hexagons and more.
    2. 
      
  2. Adjust the tile size, stroke or dot size, opacity and rotation.
    3. 
      
  3. Choose the pattern and background colors, or tap a color combo. Transparent backgrounds work too.
    4. 
      
  4. Copy the CSS background or SVG code, or download an SVG, a tile PNG or a large PNG.
    5. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
How do I use the CSS code?
Paste the background-color, background-image and background-size lines into any element's CSS. The SVG is embedded in the code, so you don't need an image file.

    
Why isn't the tile PNG rotated?
A tilted pattern can't be cut into a simple seamless square tile, so the tile PNG is saved unrotated. Use the large PNG or SVG for a rotated image.

    
What do 2x and 3x mean?
They save the tile at more pixels for high-density screens. Set background-size to the original tile size in px so it stays sharp.