Generator

Pattern Generator

Build a clean geometric pattern — stripes, checks, dots, grid, or diagonals — in your own colours, then download it at any size in your browser.

1200×630

What to create

Pattern

Size

Export

5 pattern typesCustom coloursTransparent PNG PNG · JPG · WebP

Make a pattern image

Patterns make great backgrounds for websites, slides, packaging, social posts, and print. This generator draws five tileable geometric patterns — stripes, checks, dots, a grid, and diagonals — in any two colours you pick, at the tile size and angle you want.

You can keep a solid background colour or make it transparent and export a PNG that drops onto any design. The preview updates live, and the download is rendered at full resolution so the pattern stays crisp.

How to create a pattern

  1. Pick a pattern. Choose stripes, checks, dots, grid, or diagonal.
  2. Set colours and scale. Choose the foreground and background colours, the tile size, and (for stripes) the angle. Turn the background transparent if you want.
  3. Size and download. Enter a size or pick a preset, then download a PNG, JPG, or WebP.

Transparent patterns

Tick "Transparent background" and export a PNG to get just the pattern shapes with no fill behind them — perfect for layering a subtle texture over a coloured section without hiding what's underneath.

What the pattern generator makes

It draws one of five repeating geometric patterns across the canvas in two colours of your choice — the shapes tile edge to edge so the result reads as a continuous, repeatable texture.

Pattern controls

Pattern type
Stripes, checks, dots, grid, or diagonal (5 kinds)
Colours
Separate foreground and background hex colours
Scale (tile size)
Adjustable; the drawing starts at a 48 px tile
Angle (stripes)
Rotatable; the Diagonal preset is a fixed 45° version
Transparent background
Optional — export a PNG/WebP with only the pattern shapes
Image size
Any width × height, 8–8000 px per side
Export format
PNG (lossless), JPG (smaller), or WebP

What to use it for

  • A subtle website, slide, or packaging background — stripes or dots in two close tones read as texture without competing with text.
  • A transparent overlay texture you layer over a coloured section or photo without hiding what is underneath.
  • A grid or checks background for a notebook-style page, a graph backdrop, or a checkerboard 'transparency' indicator.
  • A social post or banner background that needs a clean, geometric look rather than a photo.

Tip

Turn on "Transparent background" and export a PNG to get just the pattern shapes with nothing filled behind them — ideal for dropping a light texture over an existing colour. A smaller tile scale makes the pattern finer and denser; a larger one makes it bolder and more spaced out.

More things to generate

Frequently asked questions

What patterns can I make?

Stripes, checks, dots, a grid, and diagonal stripes — each in your own foreground and background colours at an adjustable scale.

Can the pattern be transparent?

Yes. Turn on the transparent-background option and export a PNG or WebP to keep the areas around the shapes see-through.

Can I change the stripe angle?

Yes. For stripes there's an angle slider; the Diagonal pattern is a fixed 45° version for convenience.

Where is my image processed?

The image is generated in your browser, so the file is created on your own device. How any data associated with the tool is handled is described in our privacy policy.

More image tools