Sprite Sheet Creator
Combine PNG, JPG and WebP sprites into a transparent sprite sheet. Arrange frames, trim empty borders, add spacing and edge extrusion, preview animation and export PNG with JSON or CSS.
Drop your individual sprite images here, or try the sample.
Atlas preview
Drop PNG, JPG or WebP files.
No image loaded.
Animation preview
Add frames to preview.
Preview mode does not change exported frame order.
PNG atlas + JSON frame coordinates. No resizing.
Frames 0
Drag frames to reorder, or use Move earlier/later. Undo covers the last 20 frame edits. Opening, clearing or re-slicing starts a new history. Names are made unique to avoid ZIP collisions.
A sprite sheet for your existing artwork
Use a uniform grid for frame-based animation. Compact rows use less space for mixed-size sprites; transparent trimming records the original placement in JSON. A single sheet keeps related assets together.
Need a new character instead? Character Sprite Sheet Creator generates animated characters from built-in parts. Use the Pixel Art & Sprite Editor to draw or edit pixels.
Limits: 100 frames · 20 MiB per image · 4096 px per edge · 16,777,216 total frame pixels. PNG/JPG/WebP only; animated imports use the first decoded frame. Export your work before closing this tab.
Using Sprite Sheet Creator
Combine PNG, JPG and WebP sprites into a transparent sprite sheet. Arrange frames, trim empty borders, add spacing and edge extrusion, preview animation and export PNG with JSON or CSS.
- Add individual sprite images, or try the animated sample. Files are sorted naturally on import.
- Choose a uniform grid or compact rows. Set spacing, border and maximum texture size; trimming is available in compact mode.
- Rename and reorder frames. Set frame timing and preview the animation before exporting.
- Download the PNG atlas and JSON together, or get a ZIP with the sheet, metadata, static CSS classes and README.
Example
Try the 12-frame bouncing creature sample. Preview its animation, compare Grid and Compact rows, then export the atlas ZIP.
Questions & answers
Does this generate a character for me?
This tool combines existing images. To build a new animated character from built-in parts, use Character Sprite Sheet Creator in Studio.
Will packing reduce image quality?
Packing uses original decoded pixels without scaling or color quantization, and PNG retains full color and soft transparency. Browser color management and decoding can affect encoded color profiles; original file metadata is not preserved.
What does transparent trimming do?
Compact mode can remove fully transparent borders. JSON records the original source dimensions and offsets, so a compatible atlas loader can restore alignment. Grid mode keeps original frame bounds and centers images in cells.
What are spacing and extrusion?
Spacing separates sprite regions. Extrusion repeats their outermost pixels into an added border, which can reduce texture sampling bleed. JSON frame rectangles exclude that extruded border.
Which engines can use the JSON?
The export follows common unrotated JSON hash atlas fields: frame, trimmed, spriteSourceSize and sourceSize. Test it with your engine’s atlas loader. CSS exports are static sprite classes, not a complete animation player.
Can I edit the packed sheet later?
Keep your original images. You can reopen the exported PNG and JSON together in Sprite Sheet Slicer to restore trimmed frames. The ZIP is an asset bundle, not an editable project file.
What are the limits?
Up to 100 frames, 20 MiB per image, 4096 pixels per edge and 16,777,216 total decoded frame pixels. Sheets are also limited to that pixel budget. Animated image imports use only the browser-decoded first frame. Large files can use substantial browser memory.
Are images uploaded?
Processing and downloads happen in your browser. There is no processing upload or automatic project storage. Advertising and optional analytics follow the website privacy and consent settings.
Related tools
A useful next step for your task.
Developer & DataSprite Sheet Slicer & AnimatorSplit a sprite sheet into PNG frames, adjust grid margins and spacing, import unrotated atlas JSON, preview animation timing and export a frame…
Images & DesignPixel Art & Sprite Editor OnlineFull workspaceDraw pixel art and animate sprites online for free: pixel-perfect pencil, shapes, fill, mirror drawing, layers, frames with onion skin, retro…
GIF & AnimationGIF to CSS Sprite ConverterTurn animation frames into a PNG atlas with CSS frame positions and a JSON timing manifest, ready for a web project.
Images & DesignSprite Atlas Capacity CalculatorPlan a grid of sprites in a texture with padding around each cell.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.