Image Sprite Sheet Generator
Upload a set of icon or animation frame images to pack them into one sprite sheet PNG, along with the CSS background-position values needed to reference each frame — reducing the number of separate image requests a page needs.
Your images are processed on your device via Canvas and are never uploaded to our servers.
A sprite sheet is commonly used in game development and web UIs — all images are placed in equal-size cells with no spacing, with ready-to-use CSS shown below the result.
Drag several images here or choose them
JPG, PNG, or WebP, more than one image
What this tool does
Merges several images into one file arranged in a grid — a sprite sheet — and gives you CSS alongside it showing how to display any single frame.
When to use it
- You are building a web game or animation and need its frames in one file.
- You want fewer network requests by combining several icons into one image.
- You are preparing a set of states for an interface element (normal, hover, pressed) in one file.
How to use it
- Put the images on the drop area or choose them in the frame order you want.
- Remove any you do not want, or clear all and start again.
- Generate the sheet and download it.
- Copy the CSS shown and use it to display a given frame by its number.
A practical example
Input
Eight images making up a character's animation frames.
Output
One image file holding all eight frames in a grid, plus CSS showing how to display frame N by shifting the background position.
Limitations
- Images of differing dimensions are placed in uniform cells, so smaller ones can sit with space around them.
- Frame order follows the order you added the images in; changing it means regenerating.
- The accompanying CSS is a starting point that demonstrates the principle, not a stylesheet ready for your project.
Privacy and processing
Every image is processed inside your browser and none is uploaded to our servers.
Technical notes
- The grid calculation is shared with the contact-sheet and image-splitter tools.
- The CSS relies on offsetting the background position to reveal one frame, which is the standard way sprite sheets are consumed.