Sprite Sheet Generator
Pack multiple images into one sprite sheet and get the matching CSS and JSON atlas.
Drag & drop your sprite frames here, or click to browse (multiple files allowed)
No uploads. Your files stay on your device.
How it works
Drop in every frame of your animation or every icon you want to bundle, and the frames are packed into one sprite sheet on a uniform grid — each cell is as large as your biggest frame, and frames are drawn top-left aligned inside their cell so the maths stay predictable. Choose a grid, a single row or a single column, set the spacing between frames, and reorder or remove frames until the sheet looks right; the preview redraws instantly.
Everything happens locally in your browser with the Canvas API — your frames are never
uploaded. Download the sheet as a lossless PNG, copy ready-to-paste CSS with the
background-position for every frame, or copy a JSON atlas (TexturePacker-style
hash format) for game engines like Phaser and PixiJS.
Frequently asked questions
How do I make a sprite sheet from multiple images?
Drop all your frames onto the tool at once. They are packed onto a uniform grid where every cell is as large as your biggest frame, and each frame is drawn top-left aligned inside its cell. Pick a grid, a single row or a single column, set the spacing, reorder frames with the up/down buttons, then download the sheet as a PNG.
Does this sprite sheet generator upload my images?
No. Your frames are decoded and drawn onto a canvas entirely inside your browser using the Canvas API. Nothing is sent to a server, so unreleased game art or client assets never leave your device. The tool even works offline once the page has loaded.
Can I use the sprite sheet with CSS or a game engine like Phaser?
Both. Copy CSS gives you a .sprite base rule plus one class per frame with the correct width, height and background-position. Copy JSON gives you a TexturePacker-style JSON hash atlas with the x, y, w and h of every frame, which Phaser, PixiJS and most other engines can load directly alongside the PNG.