Skip to content
ToolQivo

Sprite Sheet Generator

Pack animation frames or icons into one sprite sheet.

Image Tools Reviews Free · no sign-up

Drop every frame here, or click to choose them

Frames are sorted naturally, so frame-2 comes before frame-10

Quick Tool Overview

The Sprite Sheet Generator packs animation frames or icons into one image on an even grid, with cells sized to the largest frame so the arithmetic in your engine stays simple. Alongside the PNG you get the frame coordinates as JSON and a ready-made CSS steps() animation, which covers both the game and the web use directly.

What it does
Packs many frames into one sprite sheet
You give it
A set of frames or icons
You get back
A sheet plus JSON and CSS coordinates
Best for
Game animation and CSS sprite animation
Image Tools Free, unlimited use No sign-up Runs in your browser

About the Sprite Sheet Generator

A sprite sheet is one image holding every frame of an animation on an even grid, which is how game engines and CSS animations step through frames without loading a file each time.

Drop the frames in and they are packed into a grid with uniform cells sized to the largest frame, so the arithmetic in your engine stays simple: frame N sits at column N modulo the column count. Alongside the image you get the frame coordinates as JSON and as CSS keyframes, which covers both the game and the web use directly. Padding between cells can be added to stop neighbouring frames bleeding into each other when the sheet is scaled.

Key features of the Sprite Sheet Generator

Even grid cells

Cells are sized to the largest frame and smaller frames centred inside them, so frame N is always at a predictable offset.

JSON coordinates

Every frame's x, y, width and height come out as JSON, ready for an engine's atlas loader.

CSS animation included

A steps() keyframe block with the correct background-size and frame count, ready to paste into a stylesheet.

Padding between cells

One or two pixels of gap stops neighbouring frames bleeding in when the sheet is drawn at a non-integer scale.

Natural filename sort

frame-2 comes before frame-10, which a plain alphabetical sort would get wrong.

How to use the Sprite Sheet Generator

  1. 1

    Add every frame

    Drop the frames in, in order. The filenames are sorted naturally so frame 2 comes before frame 10.

  2. 2

    Choose the layout

    Set the columns, or ask for a single row or a square-ish sheet.

  3. 3

    Add padding if needed

    A pixel or two between cells prevents bleeding when the sheet is drawn at a non-integer scale.

  4. 4

    Take the sheet and the data

    Download the PNG, and copy the JSON coordinates or the CSS keyframes beside it.

Frequently asked questions

The cells are sized to the largest frame so every frame fits, and smaller frames are centred inside their cell. Keeping your source frames the same size to begin with gives the tightest sheet.

Reviews of the Sprite Sheet Generator

What people who use the Sprite Sheet Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Sprite Sheet Generator. It takes half a minute and no account.

Write the first review

More image tools