Sprite Sheet Generator
Combine 2 to 64 PNG, JPG or WebP images into one sprite sheet. Set cell size, columns, spacing, padding, background and fit, reorder frames, then download the PNG plus a JSON coordinate map and CSS background-position classes.
Loading Sprite Sheet Generator…
About the Sprite Sheet Generator
Sprite Sheet Generator packs several images into a single grid image for games, animations and CSS sprites. Add 2 to 64 PNG, JPG or WebP images; they keep the order you selected them in, and you can reorder or remove frames before generating. Choose the cell width and height, the number of columns, the spacing between cells, the outer padding, a transparent or solid background, and contain, cover or stretch fitting.
The preview shows the exact sheet with optional grid lines and frame numbers that are never exported, along with the final sheet dimensions. Download the PNG together with a JSON coordinate map and a CSS file of background-position classes. Every coordinate follows the same rule: x = padding + column × (cell width + spacing), and y = padding + row × (cell height + spacing).
How to use
- Choose or drop at least 2 images (up to 64).
- Reorder or remove frames in the list.
- Set cell size, columns, spacing, padding, background and fit.
- Check the preview and the sheet dimensions.
- Download the PNG, JSON and CSS.
Key features
- 2 to 64 frames, kept in selection order.
- Reorder and remove frames before export.
- Cell size, columns, spacing and padding controls.
- Transparent or solid background and contain, cover or stretch fit.
- Labelled preview grid that is never exported.
- JSON coordinate map and CSS background-position classes.
- Coordinates that exactly match the generated cells.
Best practices
- Use frames of the same size for animations.
- Add 1–2 px spacing to avoid bleeding when sprites are scaled.
- Use PNG sources with transparency for game sprites.
- Keep file names meaningful — they become CSS class names.
- Choose columns that keep the sheet roughly square.
Benefits
- Fewer image requests for websites and games.
- Ready-to-use JSON and CSS maps.
- Exact, predictable layout.
- Private: nothing is uploaded or stored.
Frequently asked questions
How are frame positions calculated?
x = padding + column × (cell width + spacing) and y = padding + row × (cell height + spacing), counting columns and rows from 0. The JSON and CSS use exactly these values.
How big can the sheet be?
Up to 64 frames and up to 8,192 px per side or about 16.7 megapixels in total. The tool shows an error if your settings would exceed this.
Are the grid lines and numbers in the PNG?
No. They are drawn on a separate preview layer and are never included in the downloaded sprite sheet.
How are CSS class names created?
From each file name, lowercased with spaces and symbols turned into hyphens and prefixed with “sprite-”. Duplicate names get a number added.
What do contain, cover and stretch do?
Contain fits the whole image inside the cell, cover fills the cell and crops the edges, and stretch resizes the image to exactly the cell size.
Can I keep a transparent background?
Yes. Choose a transparent background and the PNG keeps transparency; choose a solid colour to fill the empty areas.
Which files can I use?
PNG, JPG and WebP files up to 40 MB and 30 megapixels. Each file’s signature is checked and the whole image is decoded before use, so GIF, SVG, damaged files and files renamed from another format are refused with a clear message.
Are my images uploaded or saved?
No. Images are opened and processed in your browser on your device. Nothing is uploaded, and images, pixels, settings and results are not saved in browser storage. Reset releases them from memory.