Load some sprites to see their previews, dimensions, and frame order here.
Sprite Sheet Generator
Turn separate sprite images into one packed sprite sheet directly in your browser. Upload or drag in your frames, choose the grid and spacing, then download the sheet plus frame metadata without sending anything to the server.
Load multiple sprite images to build and preview a sprite sheet here.
This works best with transparent PNG or WebP sprites, but JPG frames are supported too. Every file stays on your device and the packed sheet is created locally in browser memory only.
Loaded frames
No sprites loaded
Largest sprite
-
Sheet size
Not generated yet
Cell size
Auto from largest sprite
Grid layout
-
Exports
PNG, JSON, and CSS
The JSON export maps each frame to its pixel position in the sheet. The CSS export gives you ready-to-edit background-position classes for web or UI prototypes.
Cell sizing
Loaded sprites
Your selected frames stay in order unless you choose a different frame sort above.
Exports
Download the packed sprite sheet, the Frame map JSON export, or CSS helper classes after the sheet is built.
Build a sprite sheet to unlock PNG, JSON, and CSS exports here.
What this tool does
It takes separate sprite images and packs them into a single grid-based sprite sheet that is easier to use in games, animations, and UI prototypes.
Why it is private
The sprite files never leave your browser. They are loaded from local files, packed in browser memory, and exported locally without touching server memory.
How it works
Choose multiple images, set a cell size and spacing, then the tool draws every frame into one canvas and creates companion metadata for the result.
Helpful note
If your sprites have different dimensions, use centered alignment or a custom cell size so smaller frames sit consistently inside each slot.