Seamless Pattern Maker: Tiles & Repeats

What Is Seamless Pattern Maker?

The Seamless Pattern Maker takes a single tile image and renders it across a configurable canvas to preview and export a seamless tiling pattern. You control scale, rotation, gap spacing, and choose from four tiling modes — normal grid, half-brick offset, diagonal, and mirrored — to see exactly how the tile will look when repeated. Once you're satisfied, export the result as a large PNG image or copy a ready-to-paste CSS background-image snippet. All processing happens locally in your browser with no file uploads to any server.

Key Features

• Upload tile image via drag and drop or click: The upload area accepts drag-and-drop and click-to-browse. Files larger than 10 MB are rejected with an error message. The loaded tile's dimensions are displayed below the preview thumbnail.
• Live seamless tiling preview: Every time you adjust a setting, the canvas redraws immediately. The canvas renders enough tiles to fill the entire preview area, including extra tiles at the margins to account for rotation overflow.
• Adjustable tile scale (5% to 400%): A range slider in 5% increments scales the tile up or down relative to its original pixel dimensions. At 100%, the tile renders at its native size. At 50%, it appears half-size and twice as many tiles fill the canvas.
• Rotation control (0 to 360 degrees): Rotates each tile around its center point before drawing. Works with any tiling mode. Rotation is applied using canvas ctx.rotate(), so the tile always rotates in place while the grid continues to fill the canvas.
• Gap spacing between tiles: A range slider from -50 to 50px controls spacing between tiles. Positive values add space between tiles filled with the background color, creating a border or grout effect. Negative values overlap tiles for layered effects.
• Four tiling modes: Normal — standard grid with no offset. Half-brick — alternating rows are offset by half a tile width, like brickwork. Half-drop — alternating columns are offset by half a tile height, producing a vertical stagger pattern. Mirrored — alternating columns are horizontally flipped and alternating rows are vertically flipped, creating kaleidoscope-like symmetry.
• Configurable canvas size: Width and height fields accept 100–4096 pixels. The preview canvas and the exported PNG use these exact dimensions.
• Export as PNG: Downloads the rendered canvas as pattern-[width]x[height].png.
• Copy CSS background snippet: Generates a single-tile canvas for the CSS snippet and copies three CSS properties to the clipboard: background-image, background-repeat, and background-size.

How to Use Seamless Pattern Maker

Step 1: Upload Your Tile Image

Drag an image file onto the upload area, or click it to browse for a file. Any image format your browser supports is accepted. The tile image dimensions are shown below the thumbnail — for example, "64 x 64px". If you upload a file over 10 MB, the tool shows the error "File too large" and rejects it. After a successful upload, the preview canvas immediately renders the tiling pattern using default settings.

Good tile images are ones that tile naturally without visible seams — seamlessly tileable textures, icon patterns, geometric shapes, or images you've intentionally designed to tile. Regular patterns like chevrons, dots, or fabric weaves work particularly well.

Step 2: Select a Tiling Mode

Four mode buttons appear in the Controls section:

• Normal: Standard grid, all tiles aligned in rows and columns.
• Half-brick: Odd-numbered rows are shifted right by half a tile step (including gap), exactly like a standard brick wall pattern.
• Half-drop: Odd-numbered columns are shifted down by half a tile step, creating a vertical stagger effect commonly seen in wallpaper and fabric patterns.
• Mirrored: Every other column is horizontally flipped (ctx.scale(-1, 1)) and every other row is vertically flipped (ctx.scale(1, -1)), creating symmetric reflections across tile boundaries.

Click each mode to see the effect immediately on the canvas. The mirrored mode is particularly effective for tiles that have obvious directionality, as it removes visible repeat patterns in the overall texture.

Step 3: Adjust Scale, Rotation, and Gap

Three sliders fine-tune the tiling:

• Scale (5%–400%): At 100%, the tile renders at its natural pixel size. Increase to 200% to make the tile appear large and the pattern more visible; decrease to 50% for a dense micro-pattern.
• Rotation (0°–360°): Rotate the tiles to create diagonal stripe effects or add dynamism to a pattern. A 45° rotation of a stripe tile creates a diagonal stripe pattern.
• Gap (-50 to 50px): Positive values add spacing between tiles, with the gap filled by the background color. A white background with 4px gap and a square tile produces a clean grid of floating squares. Negative values overlap adjacent tiles for layered effects.

Step 4: Configure Canvas Size and Background Color

Enter the output canvas width and height (100–4096px each, any integer value) in the two number inputs. The live preview scales to fit your screen but the actual canvas renders at the specified dimensions. For a CSS background test, 800×600 is sufficient. For a print-ready export, use 2400×2400 or larger.

Click the background color swatch to choose the fill color between and around tiles. Black with no gap creates a seamless dark texture; white with a gap creates a tiled layout with visible spacing.

Step 5: Export as PNG or Copy CSS

Click the download PNG button to download the rendered canvas as pattern-[width]x[height].png. Use this image as a texture in design software, game engines, or as an <img> element.

Click CSS to copy a ready-to-use CSS snippet to your clipboard. The snippet renders a single tile to a separate canvas (applying your scale, gap, and rotation settings) and encodes it as a base64 data URI. The three properties copied are:

background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 72px 72px;

The background-size values are the scaled tile width plus gap and the scaled tile height plus gap. Paste this directly into your stylesheet.

Practical Examples

Brick Pattern Background for a Website

Upload a 128×64 brick texture tile. Select "Half-brick" mode, set scale to 100%, gap to 2px, and background color to #2c1810 (dark mortar brown). Set canvas to 800×600. The preview shows a realistic brick pattern. Copy the CSS snippet and paste it into a .hero-section CSS rule. The background-repeat: repeat ensures it tiles infinitely in the browser.

Half-Drop Stripe Pattern for a Banner

Upload a 40×40 stripe tile (a single-color diagonal stripe on transparent background, saved as PNG). Select "Half-drop" mode, set scale to 150%, rotation to 45°, gap to 0px. The stripes combine with the half-drop offset to create a dense, staggered stripe pattern. Export as 1200×400 PNG for use as a banner background.

Kaleidoscope Tile for a Print Design

Upload a 100×100 geometric tile with a colored pattern in one quadrant. Select "Mirrored" mode, scale 100%, rotation 0°, gap 0px. The mirrored mode reflects the tile horizontally and vertically in a 2×2 repeat unit, creating a four-fold symmetric motif across the canvas. Export at 2400×2400 for a high-resolution print-ready pattern.

CSS Background Pattern for a Card Component

Upload a small dot texture tile (32×32 PNG). Select "Normal" mode, scale to 75%, gap 6px, background #f8f8f8. Canvas 400×400. Copy the CSS snippet. In your stylesheet:

.card-background {
  background-image: url("data:image/png;base64,...");
  background-repeat: repeat;
  background-size: 30px 30px;
}

The dots tile seamlessly across the card regardless of its size.

Tips and Best Practices

Use tiles specifically designed to be seamless. The tool renders whatever tile you provide; it does not automatically make tiles seamless at their edges. If your tile has content that doesn't match at its borders, you'll see visible seam lines. Design or source tiles that are already seamlessly tileable.

Mirrored mode eliminates visible repetition. Even non-seamless tiles often look acceptable in mirrored mode because the reflections disguise the edges. Try mirrored mode first if your tile wasn't designed to tile.

Rotation adds canvas margin tiles. The tool calculates a margin equal to 2 × Math.max(tileW, tileH) and renders tiles beyond the canvas boundaries to fill any gaps caused by rotation. This means rotated patterns fill the canvas completely with no empty corners.

The CSS snippet uses a single-tile data URL. The CSS export creates a new canvas sized to (tileW + gap) × (tileH + gap) for the snippet, not the full preview canvas. This keeps the data URL small and lets the browser handle infinite tiling natively via background-repeat: repeat.

Settings are shareable via URL. The tool uses useShareableState to encode your current settings (scale, rotation, gap, canvas size, background color, tiling mode) into the URL. Share the URL with a collaborator and they'll see your exact configuration.

The gap control ranges from -50 to 50px. For grout-like effects, a positive 3–8px gap with a contrasting background color is typically realistic. Values above 20px create very widely spaced tiles suitable for icon grids or spaced geometric patterns. Negative values create overlapping tile effects.

Common Issues and Troubleshooting

"File too large" error: The tool rejects files over 10 MB. Compress your tile image to under 10 MB using the Image Compressor before uploading.

"Invalid format" error: The tool requires a valid image file (file.type.startsWith('image/')). Non-image files will be rejected. Ensure you're uploading an actual image.

Pattern shows visible seam lines: The tile edges don't match. The tool renders whatever tile you provide. For a seamless result, use an image that was specifically designed to tile without visible edges. The mirrored mode can partially disguise non-seamless edges.

Canvas appears blank after upload: The live preview renders only when a tile image is loaded. If the upload succeeded (tile thumbnail is visible) but the canvas is blank, try clearing and re-uploading. Also ensure the canvas width and height are not set to values that prevent rendering.

"No image loaded" toast when exporting: Click PNG or CSS without an image loaded. Upload a tile image first.

CSS snippet has a very large data URL: The single-tile canvas is sized proportionally to your scale setting. At scale 400% on a large tile, the CSS data URI can become quite large. For production CSS, it's better to save the tile as a separate image file and reference it with a regular URL rather than using an embedded data URL.

Privacy and Security

The Seamless Pattern Maker processes all images entirely within your browser. Tile images are loaded using the FileReader API and stored as in-memory data. All canvas operations (drawing, scaling, rotating, mirroring) use the browser's Canvas 2D API with no server communication. The CSS export copies data to your local clipboard only. The tool works offline after the page has loaded once.

Frequently Asked Questions

Is Seamless Pattern Maker free to use? Yes, completely free. All four tiling modes, all controls, PNG export, and CSS copy are available at no cost with no account required.

Does Seamless Pattern Maker work offline? Yes. After the initial page load, all rendering uses the Canvas 2D API in your browser. No network requests are made during pattern creation or export.

Is my data safe with Seamless Pattern Maker? Your tile images never leave your device. The FileReader API loads them into local browser memory, and all processing and export is performed client-side. Nothing is transmitted to any server.

What image formats can I use as tiles? Any image format your browser natively supports: JPEG, PNG, WebP, GIF, SVG (as an image element), and on newer browsers, AVIF and HEIC. Animated GIFs will use only the first frame.

What is the maximum tile file size? The tool enforces a 10 MB file size limit. Files larger than 10 MB will trigger the "File too large" error and be rejected. For typical tile textures (64×64 to 512×512 pixels), this limit is rarely reached.

How does the half-brick tiling mode work? In half-brick mode, every odd-numbered row (row index % 2 === 1) shifts its starting X position right by stepX / 2 (half of the tile width plus gap). This creates the classic brick bond where horizontal joints are staggered, which is structurally stronger and visually distinctive.

How does the mirrored tiling mode work? The mirroring is applied per-tile during canvas rendering. For each tile, the tool checks whether its column index is odd (flip horizontally) and whether its row index is odd (flip vertically). It applies ctx.scale(-1, 1) and/or ctx.scale(1, -1) before drawing the tile, then restores the canvas state afterward. This creates a 2×2 symmetric tile unit across the pattern.

Can I use the CSS snippet in production? You can, but for production use a separate image file is generally preferable. Embedded data URLs in CSS cannot be cached independently by the browser, they increase stylesheet size, and they're difficult to update. Use the PNG export to save the tile as a file and reference it with a url("path/to/tile.png") in your CSS instead.

How does rotation affect the tile grid? Rotation is applied to each tile individually using ctx.save(), ctx.translate(), ctx.rotate(), and ctx.restore(). The tile grid itself (position of each tile's center) is not rotated — only the tile image within each position is rotated. To create an angled stripe effect, combine rotation with half-drop or half-brick mode.

Can I save my pattern settings? Yes. Settings are automatically encoded in the URL via useShareableState, so bookmarking or sharing the URL preserves your current configuration. Premium supporters can also save named presets for scale, rotation, gap, canvas dimensions, background color, and tiling mode.

Related Tools

• SVG Pattern Generator — Create scalable vector patterns programmatically without needing a source tile image.
• Placeholder Generator — Generate flat-color placeholder images to use as quick tile inputs for testing the pattern maker.
• Noise Texture — Generate procedural noise textures that work well as seamless tile inputs.
• Image Effects — Apply filters to your tile image before using it as input to the pattern maker.

Try Seamless Pattern Maker now: Glyph Widgets Seamless Pattern Maker