TOOLS › GRID OVERLAY
FREE · NO SIGN-UP · NO WATERMARK

Pixel Grid Overlay: Add a Grid to an Image

Drop in a sprite, tileset or any image and lay a pixel grid over it. Pick the cell size, colour and opacity, make every Nth line bolder, shift the offset, then download the PNG with the grid burned in.

1 · YOUR IMAGE

#
DROP, PASTE OR BROWSE
PNG, JPG, WebP or GIF · up to 4 megapixels

2 · GRID

In image pixels. 1 shows every pixel, 16 or 32 shows tile boundaries.
0 is off. 4 with 8 px cells marks every 32 px, handy for tiles made of sub-tiles.
Offset 0, 0
X and Y in image pixels. Shifts the grid so it lands on a sheet's real cell edges.

3 · DISPLAY SCALE

Scale ×1
Scales the image up first so the grid on a small sprite is readable. Lines stay one screen pixel wide. The download uses this scale.
Need the sprite itself, not just a grid over it? SpriteLab generates clean sprites on a true pixel grid, with free sliders to retune them.
Result appears here
#
NOTHING HERE YETDrop an image on the left. The grid goes on straight away and every control re-draws it live.

How it works

Drop in an image

A sprite, a tileset, a sprite sheet, a mockup or a screenshot. Paste from the clipboard or drag a file anywhere on the page.

Set the cell size and look

Cell size is in image pixels. Pick a line colour that contrasts with the art, drop the opacity so the image still reads, and make every Nth line bolder to mark bigger units.

Scale up, then download

Small sprites get scaled up before the grid is drawn, so a 16 px grid on a 32 px sprite is actually visible. The PNG you download has the grid burned in at that scale.

What a grid is for

A grid over an image answers three questions fast: is this art on a consistent pixel grid, do the tiles line up, and where does each cell of a sprite sheet start. All three come up constantly when you are mixing assets from different sources.

Checking AI pixel art

Set the cell size to the grid you expect and scale up. If the pixels drift off the lines, the art is off-grid. The fix tool snaps it back.

Tilesets and sheets

16 or 32 px cells with a bold line every few cells shows tile edges and seams at a glance. Use the offset when the sheet has a margin.

Reference and tutorials

A burned-in grid is what you want on a reference sheet or a tutorial image: it survives every viewer, every chat app and every screenshot.

FAQ

Is the grid overlay tool free?

Yes. It runs entirely in your browser, needs no account and adds no watermark. The image never leaves your machine.

Why does my 16 px grid look invisible on a small sprite?

A 32 px sprite with 16 px cells only has one line in each direction, and at 1:1 it is a single pixel wide. Use the display scale chips: at ×8 the sprite is scaled up first, so every cell and line is easy to see. The download uses the same scale.

What cell size should I use?

Match it to the thing you are checking. Use 1 or 2 px to inspect individual pixels on a small sprite, 8 or 16 px to check tile boundaries in a tileset, and 32 or 64 px for sprite sheet cells or level mockups.

What does the offset do?

It shifts the whole grid by that many image pixels in X or Y. Use it when a sprite sheet has a margin before the first cell, so the lines land on the real cell boundaries instead of the image edge.

Can I get the grid on a transparent layer instead?

This tool burns the grid into a copy of the image, which is what you want for reference sheets, tutorials and screenshots. If you need a grid layer to toggle in your editor, most pixel editors have one built in; this is for images that leave the editor.

More free tools

In the app

Open SpriteLab to keep building with your sprites.