BYTETOOLS

Sprite Sheet Generator

Pack icons or animation frames into one sprite sheet PNG and get matching CSS background-position classes or a JSON frame map, all in the browser.

Drop your frames / icons (up to 64)Processed locally — never uploaded

What is the Sprite Sheet Generator?

This generator packs multiple images — icons, animation frames, textures — into a single sprite sheet PNG.

  • Row, column or grid packing with custom columns
  • Auto cell size from the largest frame, or manual width/height
  • Adjustable spacing between cells
  • Generated CSS with background-position per frame
  • JSON frame map for game engines
  • 100% private — images never leave your browser

How to use the Sprite Sheet Generator

  1. 1

    Drop your frames or icons into the upload area (up to 64).

  2. 2

    Choose a layout: single row, single column or grid.

  3. 3

    Set the spacing, and a fixed cell size if you don't want auto.

  4. 4

    Copy the generated CSS classes or the JSON frame map.

  5. 5

    Download the sprite sheet PNG.

About the Sprite Sheet Generator

This generator packs multiple images — icons, animation frames, textures — into a single sprite sheet PNG. Arrange them in a row, a column or a grid with a chosen number of columns, control the spacing, and either let the cell size follow your largest frame or set exact cell dimensions.

Alongside the PNG you get ready-to-paste CSS classes with the correct width, height and background-position for every frame, plus a JSON frame map listing each frame's x, y, width and height. The CSS drops straight into a stylesheet for icon sprites, while the JSON coordinates feed game engines, animation libraries and custom renderers without any manual measuring.

The sheet is composed 100% locally in your browser on a canvas — your images are never uploaded to a server, and the generated code is produced on your device too. Sprite sheets remain a solid optimisation for games and interfaces: one file means one network request, one decode, and animation frames that always stay in perfect alignment.

Frequently asked questions

What is a sprite sheet and why use one?

A sprite sheet is a single image containing many smaller graphics laid out on a grid. Games and websites use them because loading one image is faster than loading dozens, and animation frames stay perfectly aligned.

How do I use the generated CSS?

Add the .sprite base class to an element, then the frame class you want. The base class sets the size and the sheet as background; each frame class shifts background-position so only that frame shows. Update the url() to where you host the PNG.

Do all my frames need to be the same size?

No. Each frame is centred inside its cell and scaled down only if it is bigger than the cell, so mixed sizes work. For pixel-perfect animation, though, equally sized frames are still the best practice.

What does the JSON frame map contain?

It lists the sheet dimensions plus every frame's x, y, width and height in pixels, keyed by the source file name. Most game frameworks can consume these coordinates directly to crop frames from the sheet.

How many images can I pack into one sheet?

Up to 64 frames per sheet, and the tool warns you if the combined sheet would be too large for browser canvas limits. For bigger sets, split them across two sheets.

Related tools