← All text tools

Sprite sheet maker

Combine images or frames into one sprite sheet, with the CSS and JSON.

  • Free
  • No sign-up
  • Works on any device

About Sprite sheet maker

Combine many small images or animation frames into one sprite sheet, together with matching CSS and JSON coordinates. Loading a single file instead of dozens cuts requests and keeps game or UI animations in sync. Keep all frames the same size so the grid stays predictable.

How to use Sprite sheet maker

  1. Add the images or frames you want to combine.
  2. Set the columns and the spacing between frames.
  3. Save the sprite sheet and copy the CSS or JSON that goes with it.

Why use this tool?

Also known as

Frequently asked questions

What is the JSON output for?

It lists each frame's name, position and size inside the sheet. Game engines such as Phaser read it to cut out the correct frame without you entering coordinates by hand.

Do all frames need the same size?

It is best if they do. Equal frame sizes make the grid regular, so the CSS or game code can find each frame by simple position maths.

How many columns should I choose?

There is no fixed rule. A square-ish sheet is easy to manage, so pick columns close to the square root of your frame count, and keep the sheet within the texture limits of your engine.

Is Sprite sheet maker free?

Yes. Sprite sheet maker on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools