// repeat a small image across a canvas to create seamless tiles
Repeat any small image across a canvas to create seamless tiled patterns. Set canvas size, tile scale, spacing, and export as PNG. Free, browser-based, no upload needed.
Drop image here
or click to browse
PNG · JPG · WebP · GIF
No image yet
Upload a tile image and click GenerateDrag & drop or click to select any PNG, JPG, WebP, or GIF image to use as the repeating tile.
Choose the output canvas dimensions, tile scale, spacing, offset, rotation, and background color.
Click Generate, preview the result, then download the full-resolution PNG to your device.
The Image Tiler tool takes any small image and repeats it across a canvas of your chosen size — like CSS background-repeat but rendered to a downloadable PNG. Perfect for generating seamless pattern backgrounds, textures, or tiled wallpapers from a single source tile.
Everything runs in your browser. Your images are never uploaded to any server.
No. Image Tiler is entirely browser-based. Your images are processed locally using the HTML5 Canvas API — they never leave your device or get sent to any server.
You can upload PNG, JPG/JPEG, WebP, and GIF files. The output is always exported as a high-quality PNG, which supports transparency if your source tile has a transparent background.
The canvas supports up to 4000×4000 pixels. For very large canvases with small tiles, generation may take a moment depending on your device's performance.
The offset (stagger) setting shifts every other row of tiles horizontally by the specified percentage of the tile width. Setting it to 50% creates a classic brick-lay pattern.
Yes — if your source image is already seamlessly tileable (its edges match up), the output will be perfectly seamless. For non-seamless tiles, you can use spacing and offset to create intentional gap-based patterns.
The rotation slider rotates each tile individually around its own center. Tiles are drawn with their rotated bounding box, so rotation may reveal the canvas background color between tiles.
Absolutely. Generate your tiled PNG, then use it as a CSS background image with background-repeat: no-repeat or simply set a small source tile as background-repeat: repeat directly in CSS for dynamic use.
There is no hard tile count limit. The tool will fill the entire canvas regardless of how many tiles are needed. Very small tiles on a very large canvas may result in thousands of drawn tiles — this is handled efficiently via the Canvas 2D API.
An image tiler is a tool that takes a single source image — often called a "tile" — and repeats it across a larger canvas to fill the entire space. The result looks like tiles on a floor or wall: the same motif repeated row after row, column after column. This technique is fundamental in digital design, web development, game development, and textile pattern design.
💡 Looking for premium web development assets? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
The process is conceptually simple: start at the top-left corner of the canvas and draw the tile image. Move right by the tile's width (plus any spacing), draw again. When you reach the right edge of the canvas, move down by the tile's height and start a new row from the left. Repeat until the entire canvas is filled.
Under the hood, our Image Tiler uses the HTML5 <canvas> element and the Canvas 2D rendering API — specifically the drawImage() method — to paint each tile at the correct position. Scaling is handled by adjusting the destination width and height passed to drawImage(), while spacing adds an offset to the X and Y positions between draws. The stagger/offset feature shifts every odd-numbered row by a percentage of the tile width, creating brick-style layouts.
Image tiling is useful in a surprising number of design contexts:
A seamless tile is one where the edges of the image perfectly match up with the edges of adjacent copies. When tiled, there are no visible seams or boundaries — the pattern flows continuously. Seamless tiles are highly desirable for backgrounds and textures because they look natural.
A non-seamless tile has visible edges when repeated. This isn't always a bad thing — sometimes a grid of clearly defined tiles is the intended aesthetic, like square photo mosaics or icon grids. Using the spacing option in this tool, you can also add deliberate gaps between non-seamless tiles for a "gallery wall" effect.
Our tool supports both: if you provide a seamless source tile, the output will be seamless. If your source has edges, the output will show them — or you can use spacing to turn them into a feature rather than a flaw.
Tile Scale: The scale slider lets you resize the tile relative to its original dimensions before tiling. A value below 100% makes each tile smaller (more tiles fit on the canvas); a value above 100% makes each tile larger (fewer tiles). This is useful when your source tile is too small or too large for the desired canvas size.
Spacing: Adds a gap between each tile both horizontally and vertically. Set spacing to 0 for edge-to-edge tiling, or increase it for a spaced grid look. This is particularly effective with icon tiles where you want breathing room between each icon.
Stagger / Offset: Shifts every other row of tiles horizontally by a percentage of the tile width. At 50%, you get a classic brick pattern. At 25% or 75%, you get a more subtle stagger. This breaks up the rigid grid look and creates more organic, natural-feeling patterns.
Rotation: Rotates each tile by a fixed number of degrees around its center. This creates interesting diagonal or rotated grid effects. Note that rotation may introduce gaps at tile edges depending on the source image's transparent regions.
Opacity: Controls how transparent each tile is drawn onto the canvas. Lower opacity creates ghosted, subtle patterns, while full opacity produces vivid tiles.
After generating your tiled image, click the Download PNG button to save the full-resolution output to your device. The downloaded file matches the canvas dimensions you specified — for example, an 1920×1080 canvas will produce a 1920×1080 PNG file.
PNG format is used for the download because it supports lossless compression and full transparency. If your source tile had a transparent background (a PNG with an alpha channel), those transparent areas will be preserved in the output unless you've set a background color.
Once downloaded, the PNG can be used directly in CSS as a background image, set as a desktop wallpaper, inserted into a Figma or Photoshop file, or uploaded to any platform that accepts image files.
Image Tiler processes all images entirely in your browser using JavaScript and the HTML5 Canvas API. No image data is transmitted to any server. This means your private or proprietary images remain completely on your device at all times — a critical consideration when working with brand assets, confidential designs, or personal photos.