The problem
The seam is at the edges, not the middle.
When a texture repeats, the tile's right edge sits against its own left edge, and its bottom against its top. If a stone runs off the right side with nowhere to land on the left, or the lighting is brighter at the top than the bottom, the repeat draws a hard line exactly where the copies meet. A gorgeous tile can still tile badly, because the centre was never the problem.
Making it seamless means treating opposite edges as continuous: whatever leaves one side has to arrive on the other. Doing that by hand means offsetting the tile and painting over the cross, which is fiddly and easy to get subtly wrong.
Step one
Draw at a clean tile size.
Work at a size that repeats and packs well — 16, 32, or 64. A power-of-two tile scales by whole numbers and drops neatly into a tileset later. Draw the surface you want: grass, stone, water, a wall.
Start at a clean tile size
Step two
Repair the seam.
In the engine, run Suggest → Repair tile seam. It matches the wrap edges — copying the leading left and top edges onto the trailing right and bottom — so each copy lines up with the next with no seam. Then check it the only way that counts: picture, or preview, the tile repeated in a grid and look at the joins. If a copy meets a copy with no visible line, it is seamless.
Where the tile lands
CSS background-repeat.
Use the plain PNG as a repeating background. Add image-rendering: pixelated so the repeat stays crisp when scaled.
Repeating texture.
Use the PNG as a texture with repeat enabled and the filter set to Nearest, or build a tileset from it.
Tileset import.
The tileset exports as a PNG plus .tsx and .tsj metadata that Tiled and engines reading that format can slice straight away.
Step three
Export and keep it crisp.
Export the Tiled tileset — a PNG plus .tsx and .tsj metadata — for Tiled and engines that read that format, or a plain transparent PNG to use as a repeating texture or CSS background. Wherever it lands, turn smoothing off: Nearest filtering in an engine, or image-rendering: pixelated in CSS. A seamless tile that gets bilinear-filtered on repeat grows a soft seam right back.
From square to surface
Clean size
Draw the tile at a power of two like 32 x 32.
Repair seam
Run Suggest → Repair tile seam to match the wrap edges.
Verify repeat
Repeat it in a grid and confirm there is no visible join.
Export crisp
Ship a tileset or PNG; keep smoothing off where it repeats.
Pixelpond workflow
Clean size, clean repeat.
The seamless pixel tile maker packages this whole pass — seam repair, repeat preview, and Tiled tileset export — into the engine.
A seamless tile follows the same rule as every other crisp asset: keep the grid exact end to end. The guide to scaling pixel art without blur covers why integer sizes and Nearest filtering matter, and exporting a Godot-ready sprite walks the same export discipline for animated frames.
Seamless tile checklist
- Draw at a power-of-two size like 16, 32, or 64.
- Run Suggest → Repair tile seam to match the wrap edges.
- Verify by repeating the tile in a grid and checking the joins.
- Export a Tiled tileset, or a plain PNG to repeat as a texture or background.
- Turn smoothing off where it repeats: Nearest in engines, pixelated in CSS.