Penguin walk
Six frames in one row, standing on one ground line.
Sprite Sheet Maker
Drop your PNG frames, icons or game items and get one sprite sheet in seconds: a neat grid or packed tight, with a JSON or XML atlas, CSS sprites and an animated GIF. This free sprite sheet maker runs in your browser, so nothing is uploaded.
Sprite sheet makerFree · runs in your browser
Drop your pictures here
PNG, WebP, JPG, GIF or AVIF, as many as you need. Everything stays in your browser.
- Free, runs in your browser
- Grid or packed layout
- JSON, XML and CSS
- Trim, padding, power of two
Sprite Sheet Maker Examples
Eight sets of pictures made for these examples, each turned into one sheet by this sprite sheet generator. Open one to try every setting.
Explosion effect
Eight frames on a square grid, from spark to smoke.
App icons
Nine icons of different sizes, trimmed and packed tight.
Pixel game items
Eight items packed at 200% with crisp pixels.
Fruit icons for CSS
Six icons in a row, ready as CSS sprites for a web page.
Space stickers
Six stickers in three columns on a power-of-two sheet.
Bat flying
Four frames in one column for engines that read downward.
Chess pieces
Six pieces of different heights, packed with an XML atlas.
How to Make a Sprite Sheet
Three steps, and nothing is uploaded.
Drop, paste or choose PNG, WebP, JPG or GIF files, as many as you need. Sort them by name or drag them into order.
Pick a grid of equal cells for animation frames, or pack pictures of any size tight. Set trimming, padding, spacing and size.
Save the sprite sheet PNG with a JSON or XML atlas, CSS sprites for a website, or the frames as an animated GIF.
What This Sprite Sheet Maker Does Best
Six things it does well, from a walk cycle to a page of web icons.
PicturesGrid or packed
A grid of equal cells keeps animation frames in order; the packed layout fits pictures of any size into the smallest sheet it finds.
Trim transparent edges
Empty borders are left out to save space, and the atlas keeps each picture's original size and offset, so nothing shifts in your game.
An atlas for every engine
The JSON atlas is the hash format Phaser and PixiJS read; the XML atlas is the Sparrow and Starling format many game frameworks read.
CSS sprites for websites
One class per picture with its size and position, so a page loads one image instead of dozens.
Animation preview and GIF
Play the pictures in order at the frame rate you set, and save them as an animated GIF to share or test.
Free and private
This sprite sheet maker runs entirely in your browser: no upload, no account, no watermark, and it works offline once the page has loaded.
Guide: Sprite Sheets That Fit Your Engine
Five short tips for a clean sprite sheet.
Name your files in order
Files named walk_1, walk_2 … walk_10 sort in the right order with Sort by name, numbers read as numbers; drag any picture to move it.
Grid for animation, packed for sets
Use a grid when frames must keep one size and position; pack icons, items and tiles of different sizes to save space.
Trim and keep the offsets
Trimming makes the sheet smaller, and engines that read the atlas put each picture back in its place. For a plain grid read by cell size, leave trimming off.
Padding against bleeding
Add 1 to 2 px of padding or spacing when the sheet is scaled or filtered, so neighbouring pictures never show at the edges.
Watch the sheet size
The size shows under the preview. Keep each side within 4,096 px for phones, and turn on power-of-two sizes for engines that ask for them.
Who Uses a Sprite Sheet Maker
Common reasons to put many pictures on one sheet with a sprite sheet maker.
Game developers
Pack characters, effects and items into one texture with an atlas for the engine.
Web developers
Combine icons into one image with CSS sprites to cut the number of requests.
Pixel artists
Lay out animation frames and export a clean sheet at 2× or 4× size.
Modders and animators
Build sheets with XML or JSON atlases for mods, tools and animation software.
Sprite Sheet Maker FAQ
Answers about making sprite sheets, atlases and privacy.
Add your pictures, choose a grid or packed layout, then download the sprite sheet PNG with the atlas or CSS you need.
Yes. It runs entirely in your browser, needs no account and adds no watermark.
No. Your pictures are read and laid out on your device; nothing is sent to a server.
A grid gives every picture a cell of the same size, best for animation. Packed fits pictures of different sizes as tightly as possible, best for icons and items.
JSON for Phaser, PixiJS and most web engines, XML for Sparrow and Starling style frameworks, and CSS for web pages.
No. The atlas keeps each picture's original size and offset, so engines that read it draw every frame in its place.
Yes. Open the GIF in GIF to sprite sheet, which reads every frame with its time and lays them on one sheet.
Up to 1,000 pictures on a computer and 400 on a phone, on a sheet of up to 16,384 px on each side.
Make Your Sprite Sheet Now
Add your pictures and download a sprite sheet in seconds, free with this sprite sheet maker in your browser.
Add pictures