Sprite Sheet Maker
Drop your frames in, pack them into a single sprite sheet, and download the sheet together with a coordinate file that gives every frame its exact position. It all runs on your own device — no upload, no sign-up, and you can watch the animation play before you save anything.
- 1 Drop your frames
- 2 Pick a layout
- 3 Download sheet + coordinates
Drop your frames here
or · PNG, JPG/JPEG, WebP or GIF
How to use this sprite sheet maker
1 · Add your frames in the order they should play
Drop every frame in at once, or add them in a few batches — they stay in the order you added them, and that order is what the animation preview plays and what the coordinate file lists.
2 · Choose how they are laid out
Auto grid makes the sheet roughly square. Fixed columns is what you want for a walk cycle with a known number of frames per row. One row gives a horizontal strip and One column a vertical one. Spacing adds a gap around every frame so scaling does not bleed pixels from the neighbour.
3 · Export the sheet and the coordinates together
The PNG is the packed image. The JSON gives every frame its x, y, width and height plus the original source size, so engines that expect a TexturePacker-style atlas can read it. The CSS file gives you one class per frame and a ready-made @keyframes block that steps through them.
Pack images into a texture atlas in your browser
Same job as a desktop texture packer, none of the install
A texture packer takes a folder of separate sprites and writes out one atlas image plus a data file describing where each sprite landed. That is exactly what this page does, except it happens in a browser tab: your files never leave the machine, there is no licence key and no trial window.
Watch it move before you download
Three packers that offer a CSS export — spritesheetmaker.com, toolbuddy.io and finalparsec — each handed me a stylesheet with one class per frame and a background-position, and nothing that animates: 0 @keyframes, 0 animation declarations and 0 steps( across all three files. Playback is yours to write, and frame order is the one thing a static file cannot show you. The preview above plays the sheet back at the speed you pick, so a swapped or upside-down frame shows up immediately instead of after you have wired it into a project.
Going the other way
Already have a sheet and need the single images back? Split a sprite sheet into single images →
Questions
Is this a TexturePacker alternative?
It covers the everyday job — pack sprites, get an atlas and a coordinate file. It does not try to match a full desktop texture packer: there is no polygon packing, no per-platform preset bundles and no command line. If you need those, use a desktop packer. If you need an atlas right now, this page is faster.
Are my images uploaded anywhere?
No. Every step — reading the files, measuring transparency, drawing the sheet, playing the preview — happens in your browser with JavaScript. Nothing is sent to a server, and there is no account to sign in to.
What is in the coordinate file?
For each frame: the filename, the rectangle it occupies on the sheet (x, y, width, height), the original source size, and the offset used when trimming is on. The sheet size, column count, row count and spacing are recorded under meta.
Why are my frames all the same cell size?
Every frame sits inside a cell as wide as the widest frame and as tall as the tallest one, centred. Uniform cells mean an engine can find frame n with simple arithmetic instead of reading every rectangle. Turn on Trim transparent edges to measure only the visible pixels of each frame.
Will transparency be kept?
Yes. The sheet is drawn on a transparent canvas and exported as PNG, so alpha is preserved. The checkerboard behind the preview is just there so you can see which areas are empty.
How do I use the CSS file?
Give an element both cmi-sheet and cmi-anim, keep sprite-sheet.png next to the CSS, and it steps through the frames once per second. Change animation-duration to speed it up or slow it down; the per-frame classes let you show a single frame instead.