Sprite Sheet Generator

How the layout works

The generator uses a single, predictable layout: a uniform grid. You set the number of columns, and the number of rows is ceil(images / columns). Every cell is the same square size (the tile size you pick), so each image is scaled to fit inside its tile while keeping its aspect ratio, then centred. Mixed-size images all end up in equal cells, which is exactly what CSS background-position sprites expect.

Output CSS shape

Each image becomes one class named after its file (.spr-<filename>), sized to the tile and offset to its cell. With four columns, a tile size of 128 px and no padding, the sheet looks like this:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

The offset moves in two dimensions: sprites fill each row left to right, then wrap to the next row. Save the PNG as spritesheet.png next to your CSS (or edit the url(...) to match your path).

Padding and bleed

Sprites packed edge-to-edge can bleed into each other when the browser scales the sheet (non-integer device pixel ratios, CSS transforms). Add 2 to 4 pixels of padding between cells to keep neighbouring pixels from leaking in.

High-DPI (retina) displays

There is no automatic 2x export, but you can make a sharper sheet the simple way: pick a larger tile size (for example 256 px instead of 128 px) so each sprite carries more pixels, then display it at half the CSS size. That gives crisp sprites on high-density screens without a separate pass.

When to use sprite sheets vs alternatives

• Sprite sheets: classic icon sets in CSS, HTML5 game frames, and pages that benefit from bundling many small images into one file.
• SVG sprites (symbol): better for modern UI icons, scale cleanly, accept CSS fill, no background-position juggling.
• Icon fonts: limited but still used for tiny single-color icons.
• Individual files with HTTP/2 or HTTP/3: multiplexing makes request count less of a concern than it once was.