How the Sprite Sheet Generator works
Add image frames, arrange them, choose a layout, and review the generated sheet in Preview. The tool can export the sheet with optional JSON and CSS manifest files.
- Drop image files into the drop zone or click browse files.
- Drag frames in the list to set their order. This controls index order in Grid and listing order in the manifest.
- Click a frame's X remove button to delete it from the list. Its accessibility label is
Remove frame. - Click Reset to clear the loaded frames.
Configure the sprite sheet
- Choose a Layout mode. Grid keeps the frame-list order and places frames across a set number of columns. Packed sorts placement by frame height for shelf-packing, wraps shelves at Max sheet width (px) when possible, and restores the original frame order in the manifest. An individual frame wider than that value can exceed it.
- In Grid mode, set Columns from 1 to 20. In Packed mode, set Max sheet width (px).
- Enable Fixed frame size and enter Frame size (px) when needed. In Grid mode, this defines the cell and centers the rendered frame, but an oversized scaled frame can extend beyond the cell rather than being clipped or resized to fit. In Packed mode, it defines the placed frame dimensions.
- Adjust Padding and Spacing from 0 to 100 px, and Scale from 10% to 400%.
Set transparency and background
Use Transparent background for a transparent sheet or choose a color with Background. Changing the Background color input automatically disables Transparent background; enable it again when you need transparency.
Trim transparent bounds and preview the result
Enable Trim transparent bounds to crop each frame to the smallest rectangle containing its non-transparent pixels. Fully transparent frames have no detected bounds, so they retain their original dimensions. Check the generated sheet in Preview after changing the layout or rendering settings.
Export the sprite sheet and manifest
- Choose PNG or WebP under Sheet format.
- Under Manifest, select JSON coordinates, CSS classes, or both.
- Review the Preview, then click Download ZIP.
JSON includes image, size, frameCount, and frame entries with name, filename, coordinates, dimensions, source dimensions, and optional trim data. CSS includes a shared .sprite rule and per-frame classes with dimensions and background positions. If at least one manifest option is selected and JSZip is available, the download is a ZIP containing the sheet image and selected outputs. If both options are unchecked, or JSZip is unavailable, the sheet image downloads directly.
Limitations and privacy
The visible format hint lists JPG, PNG, WEBP, GIF, and BMP. The file input accepts image/*, and dropped or selected files with another MIME type are ignored, so the hint is not an exhaustive list of browser-supported image MIME types. An image-type file that cannot be decoded may remain in the frame list with zero usable dimensions or no visible content. It can still affect the generated layout or manifest, so remove it before exporting. Selected image files are processed locally and are not uploaded by this tool. The page also imports Ahrefs and Google Analytics/GTM scripts, so this does not mean that the entire page makes no network requests.
Frequently asked questions
What's the difference between grid and packed layout?
Grid places every frame into a fixed number of columns with uniform cell sizes, in the order shown in the frame list. Packed uses shelf-packing and wraps shelves at the maximum sheet width when possible, so its arrangement can differ when frames vary in size; an individual frame wider than that value can exceed it.
Does this tool edit or animate my images?
No. Source images are only read, optionally trimmed and scaled for placement, and drawn onto a single sheet - their pixel content isn't edited and no animation is generated. Your original files are never modified.
What does trim transparent bounds do?
It crops each frame to the smallest rectangle containing its non-transparent pixels before placing it on the sheet. Fully transparent frames have no detected bounds, so they retain their original dimensions.
What's in the exported manifest?
When JSON coordinates or CSS classes are selected and JSZip is available, the download is a ZIP with the sprite sheet image and selected manifest files. JSON includes image, size, frameCount, and frame entries with names, filenames, coordinates, dimensions, source dimensions, and optional trim data. CSS includes a shared .sprite rule and per-frame classes with dimensions and background positions. If both options are unchecked, or JSZip is unavailable, the sheet image downloads directly.
Are my images uploaded anywhere?
The selected image files are processed locally in your browser and are not uploaded by this tool. The page itself also loads analytics scripts.