Sprite sheet generator
Pack frames into a sheet.
This runs in your browser. Nothing is uploaded.
About Sprite sheet generator
Packs the images you load into a near-square grid on one canvas, built in your browser, with cells sized to the largest frame and ready for a CSS or game engine animation.
Sprite sheets exist because fetching one image costs less than fetching forty. A CSS animation stepping through frames, a game engine loading a texture atlas, an icon set served in a single request — all of them want frames arranged predictably inside one file. Exporting the frames individually is the quick part of that job. Assembling them into an even grid by hand is the tedious part, and that is what this does.
The column count is the square root of the number of images, rounded up, so nine frames produce a 3×3 sheet and ten produce a 4×3 with two cells left over. Every cell is identical in size: as wide as your widest image and as tall as your tallest. Frames fill left to right, then top to bottom, in the order they were selected, each drawn at its native resolution in the top-left of its cell.
You do not choose the grid. If your animation needs a single row of eight frames, or a strict 4×4 because that is what your engine's config expects, this will not produce it — eight images become a 3×3 sheet with one empty cell. There is no atlas JSON, no trimming and no padding either, so you will be working out frame coordinates from the cell dimensions yourself. Frames of differing sizes make that harder than it should be.
How to use Sprite sheet generator
- 1Select all your frames at once, or drop them onto the panel together.
- 2Check the order — frames fill left to right, then top to bottom, as selected.
- 3Click Apply to pack the sheet, then inspect the preview.
- 4Click Download to save the sheet as a PNG.
What it won't do
- The grid shape is computed for you; there is no column, row or padding control.
- No atlas metadata — you derive frame offsets from the cell size yourself.
- Frames are neither trimmed nor scaled to match, so one oversized image inflates every cell.
Common questions
Can I set the number of columns in the sprite sheet?
No. Columns are calculated as the square root of your frame count, rounded up, which always gives the squarest grid that fits. For a single horizontal row instead, use the merge tool — it lays every image out in one line, which is what a CSS sprite with a single background-position axis usually wants.
What size will each frame be in the finished sheet?
Every cell is the width of your widest frame by the height of your tallest, and all cells match. Frames smaller than that are drawn at their own size in the cell's top-left corner, leaving transparent space. Making all your frames identical in size before packing is the only way to get a grid you can index cleanly.
Does it export a JSON atlas with frame coordinates?
No, the output is a single PNG and nothing else. You will need to note the cell width and height yourself and derive offsets from them, which is straightforward when every frame is the same size. Tools expecting a TexturePacker or Phaser atlas file will not find one here.
Why are some cells in my sheet empty?
Because the grid is always rectangular and your frame count may not fill it. Ten frames give four columns and three rows, which is twelve cells, so the last two stay transparent. Counts that are perfect squares — 4, 9, 16, 25 — fill exactly with nothing left over.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation