All blog posts

Make a seamless pixel tile.

A tile only reads as a surface when its edges wrap. Draw it at a clean size, repair the seam, then export a tileset you can repeat with no visible joins.

The short version: work at a clean tile size, run Repair tile seam to match the wrap edges, verify by repeating, then export a tileset or a plain PNG set to repeat.

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

Powers of two repeat and pack cleanly. Open the engine at the size your surface needs.

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

Web

CSS background-repeat.

Use the plain PNG as a repeating background. Add image-rendering: pixelated so the repeat stays crisp when scaled.

Game engine

Repeating texture.

Use the PNG as a texture with repeat enabled and the filter set to Nearest, or build a tileset from it.

Tiled

Tileset import.

The tileset exports as a PNG plus .tsx and .tsj metadata that Tiled and engines reading that format can slice straight away.

The same seamless source feeds three pipelines. Only the export and the repeat setting change.

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

01

Clean size

Draw the tile at a power of two like 32 x 32.

02

Repair seam

Run Suggest → Repair tile seam to match the wrap edges.

03

Verify repeat

Repeat it in a grid and confirm there is no visible join.

04

Export crisp

Ship a tileset or PNG; keep smoothing off where it repeats.

The seam repair is the one engine step; the rest is choosing a clean size and a crisp repeat.

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.