mockstack.

Sprite Sheet Generator

SHEET · CSS ← Images & Media
Frames · every frame shows here in sheet order; click one to drop it from the sheet
Packed Sheet · the packed image at real size, with the dimensions and usage readout in the rail
CSS and JSON Atlas · ready-made stylesheet positions and the engine-readable atlas, generated with the sheet
READY RUNS LOCALLY

About the Sprite Sheet Generator

Packs a folder of frames or icons into one sprite sheet plus the files that make it usable: stylesheet positions and a data atlas your engine can read. Drop the frames, pick a layout, download the set.

Every Setting

Layout
Uniform Grid gives every frame the same cell, the animation-friendly layout. Tight Pack nests mixed sizes to waste the least space. Single Row lays everything in one strip.
Padding
Empty pixels between cells, the guard against neighboring frames bleeding into each other when the sheet is scaled.
Columns
How many cells per row in the grid layout, when you want the sheet a particular shape.
Trim
Removes transparent edges from each frame while the atlas records every original offset, which is how engines expect trimmed sheets to work.
Background
Transparent for real use; white or black for checking the sheet by eye.
Downloads
The sheet alone, or the sheet with the stylesheet positions and JSON atlas alongside. The packing readout says how much of the sheet is actually used.

Common Questions

What is in the atlas?
Every frame’s name, position, size and original offset, in the JSON shape engines and frameworks read.
Do my frames upload?
No. Packing happens on your machine.

Related: GIF Maker, Image Converter.