Sprite Sheet Generator

1. Drop images on Drop frame images here or click browse files to add JPG, PNG, WEBP, GIF, BMP, or another browser-decodable image.
2. Drag frames in the list to change their order.
3. Choose Grid or Packed under Layout mode, then adjust the controls for that layout.
4. Review Preview, choose PNG or WebP under Sheet format, and select JSON coordinates or CSS classes under Manifest files.
5. Click Download ZIP when manifest files are selected, or click Reset to clear the frame list.

Generate a sprite sheet with Grid or Packed

Grid places usable frames in frame-list order across the selected Columns. With Fixed frame size off, each cell uses the largest rendered width and height in the set. Packed sorts placement by height and starts a new shelf when the next frame would pass Max sheet width (px). A frame wider than that value can still exceed it. The manifest lists frames in the original list order.

Set frame size, spacing, scale, and trimming

Turn on Fixed frame size and enter Frame size (px) to give placed frames the same cell dimensions. In Grid, each rendered frame is centered in its cell. Padding adds space around the sheet, Spacing separates cells or shelves, and Scale changes rendered dimensions. Trim transparent bounds crops each frame to the smallest rectangle containing non-transparent pixels. A fully transparent frame keeps its original dimensions.

frame-01.png + frame-02.png
Layout mode: Grid
Sheet format: PNG
→ sprite-sheet.png
→ sprite-manifest.json + sprite-sheet.css

Choose a background and export the sprite sheet

Transparent background starts checked. Changing Background turns it off; check Transparent background again to remove the fill. Select JSON coordinates, CSS classes, or both under Manifest files. JSON includes the image name, dimensions, frame count, filenames, positions, rendered dimensions, source dimensions, and trim data. CSS includes a shared .sprite rule and one class for each frame. If neither option is selected, the sheet image downloads directly as PNG or WebP.

Choose Grid or Packed for the frame set

• Use Grid when the frame list should fill a chosen number of Columns in order.
• Use Packed when frames have different sizes and should be placed on shelves within Max sheet width (px).
• Use Fixed frame size, Padding, and Spacing when the sheet needs repeatable cell dimensions and gaps.

When another image generator fits better

Use Image Layout Maker when the job is a collage, masonry layout, freeform arrangement, or labeled contact sheet with PNG, JPG, PDF, or ZIP output. Use Favicon Generator for a favicon package and ready-to-paste HTML. Use QR Code Generator when the input is a URL, text, email, phone number, or Wi-Fi network. These tools sit in Image Generate Tools.

Input handling and local processing

The file input accepts image/*. Dropped or selected files with another MIME type are skipped. A file that cannot be decoded stays in the frame list with an error and is excluded from usable frames, so remove failed frames before exporting. The selected image files are read and processed in the browser and are not uploaded by this tool. The page still loads separate analytics scripts.

Frequently asked questions