Sprite Sheet Maker
Pack multiple frame images into one sprite sheet, then export the PNG plus matching CSS and JSON atlas metadata.
Layout
Columns
Padding (px)
Class name
Packed sheet0x0
Load a few frame images to see the preview here.
.sprite {
background-image: url("sprite.png");
background-repeat: no-repeat;
display: inline-block;
}About this tool
Frames fill a fixed-column grid left to right, top to bottom. Each row is as tall as the tallest frame in that row and each column as wide as the widest frame in that column, so frames of different sizes never overlap. The padding value is applied both around the sheet and as the gutter between every cell.