Pattern Generator

All color tools

Build seamless SVG background patterns from nearly 2,000 designs: change colors, zoom, spacing and angle, then copy the CSS or download SVG, PNG or WebP.

Free

1Pick a pattern

All Lines and waves Dots and circles Geometric 3D and illusions Textiles and weaves Bricks and tiles Japanese Islamic and Moorish Art Deco Tribal and folk Nature Icons and objects Pixel art Generative

Your headline here

See how the pattern sits behind real content.

Get started
Pattern

Browse by collection

Lines and waves 273 patterns Dots and circles 189 patterns Geometric 138 patterns 3D and illusions 99 patterns Textiles and weaves 105 patterns Bricks and tiles 148 patterns Japanese 33 patterns Islamic and Moorish 30 patterns Art Deco 47 patterns Tribal and folk 62 patterns Nature 196 patterns Icons and objects 236 patterns Pixel art 152 patterns Generative 251 patterns

About Pattern Generator

The Pattern Generator turns nearly 2,000 ready-made designs into backgrounds you can tune and use right away. Browse 14 collections, from waves, polka dots and tessellations to tartans, Japanese seigaiha, Islamic stars, Art Deco fans, pixel sprites and camouflage, and see each one in your own colors.

Every design is drawn as vector art and repeats without a visible seam, at any zoom and any angle. Change up to six colors, the zoom, position, spacing, stroke width and angle, turn filled shapes into outlines, or let the pattern move with a looping animation. Generative patterns such as topographic maps, Voronoi cells and Truchet tiles can produce a new variation on every click.

When it looks right, copy it as CSS, SCSS, a Tailwind config, inline SVG, a data URI or a React component, or download an SVG, PNG, JPG or WebP at any size up to 8000 pixels, including a single tile for your own repeat. Everything runs in your browser: nothing is uploaded, and no account is needed.

How to use Pattern Generator

  1. Pick a pattern: search by name, or filter by collection and number of colors.
  2. Choose the colors with the pickers, a ready-made palette, or "New palette".
  3. Adjust the zoom, position, spacing, stroke and angle. Lock any value you like before pressing "Inspire me".
  4. Check it with the "Show the tile", "On a page" and "In text" previews.
  5. Copy the code or download the file, and use "Copy link" to come back to this exact pattern later.

Frequently asked questions

Yes. The tool is free with no sign-up and no limit: every pattern is drawn in your browser, so no file is sent to a server.

Yes. You can use the patterns you export in personal and commercial work, such as websites, apps, packaging and print, with no attribution required.

No. Every shape that crosses the edge of a tile is drawn again on the opposite side, so the repeat is seamless. Use the "Show the tile" preview to see exactly where a tile starts and ends.

CSS is the simplest: paste the rule into your stylesheet and apply it to any element. At 0, 90, 180 or 270 degrees it uses one small tile with background-size; at other angles it uses an SVG that fills the element. Tailwind, SCSS, React and data URI versions contain the same pattern.

The animation is built into the SVG, so it needs no script and also runs as a CSS background in modern browsers. Check it in the browsers you support. PNG, JPG and WebP files are still images, so they keep the first frame only.

Organic designs such as camouflage and topographic maps contain many curves. The size of the code is shown next to the copy button. If it is too heavy for a page, pick a design with a smaller tile, or use a PNG tile instead.

Yes, on almost every pattern: turn on "Transparent background" and export as CSS, SVG, PNG or WebP. A few overlapping designs hide shapes with the background color, so they need a solid one. JPG files do not support transparency.
Share this
Related Tools
Gradient Generator
Color Palette Generator
Color Shades Generator
Gradient from Image
Full White Screen
Web-Safe Color Palette
Full Red Screen
Font Pairing & Google Fonts Directory
Color Blindness Simulator
Color Palette from Website
AI Brand Palette Generator
RAL Color Matcher
AI Mood Palette
Color Wheel & Harmony Generator
Full Blue Screen
Pantone Color Matcher
Full Black Screen
Screen Color Picker
Color Contrast Checker
AI Theme & Gradient Generator
Popular searches
svg pattern generator seamless pattern generator css background pattern repeating pattern maker free background patterns geometric pattern generator tailwind background pattern seamless tile png
Need help?
Found an issue with this tool? Let our team know.
Report an issue

Add this free tool to your own website: copy and paste the code below.