Sprite Sheet Generator

Combine many images into one sheet

A sprite sheet stores many small images in one file. Games use them for animation frames and tiles, and websites have long used them to load dozens of icons with a single request. Assembling one by hand in an image editor is slow and error-prone.

This generator lays your images out in a regular grid, row by row in the order you add them. Every cell is the size of the largest image, so frames line up predictably, and the sheet is saved as a PNG that keeps transparency.

How to make a sprite sheet

1. 1

   Step 1: Add your images

   Drop up to 100 images, in the order they should appear.

2. 2

   Step 2: Set the columns

   Choose 1 to 20 columns; rows are added automatically.

3. 3

   Step 3: Adjust padding and background

   Add 0 to 80 px of padding between cells and pick transparent, white, black or a custom color.

4. 4

   Step 4: Download the PNG

   Check the live preview and download sprite-sheet.png.

Sprite sheet settings

What sprite sheets are for

• 2D game animation. Pack walk cycles and effects for engines such as Phaser, Godot or Unity.

• CSS icon sprites. Serve many icons as one image and position them with background-position.

• Tile sets. Assemble map tiles into a single atlas.

• Emoji and sticker packs. Keep a set of small graphics in one organized file.

Finding each sprite's position

Because every cell has the same size, you can calculate positions instead of reading a map file. With cell width W and height H (the largest image's dimensions) and padding P, the image at column c and row r (counting from zero) starts at x = c times (W + P) and y = r times (H + P).

Images smaller than the cell are placed at the top-left corner of their cell and are not scaled. For animations, export all frames at the same size so each frame sits exactly in its cell.

• x = column times (cell width + padding).
• y = row times (cell height + padding).
• Frames are numbered left to right, top to bottom.

Using the sheet in CSS

Set the sheet as a background-image on an element sized to one cell, then move it with a negative background-position, for example background-position: -64px 0 for the second 64 px icon in the first row.

For high-density screens, create the sheet from images at twice the display size and scale the background with background-size.

Tips for sprite sheets

• Name your frames with numbers (01, 02, 03) and add them in that order.
• Use 1 to 2 px of padding for game textures to prevent edge bleeding.
• Keep sprites the same size for animations.
• Compress the final PNG with the bulk compressor if size matters.

Sprite sheet generator FAQ