How to use it
- Choose the frames. You can select many files at once and add more later.
- Move frames up or down to set the order.
- Set the Columns and the Gap between frames, then press Download sprite sheet.
- Copy the CSS and use it with the downloaded file.
How it works
The cells form a grid, filled row by row. Four 32 × 32 frames in 2 columns with no gap give a 64 × 64 sheet with cells at (0, 0), (32, 0), (0, 32) and (32, 32). The CSS shifts the background by minus the cell’s corner, so the second frame uses background-position: -32px 0. Without a chosen number of columns the grid is as square as possible: 4 frames make 2 columns, 5 make 3.
Worked example
Eight walking frames of 48 × 48 px in one row (8 columns) give a 384 × 48 sheet. The animation snippet plays them with steps(8).
Tips
- Name files so they sort in order (frame-01, frame-02) before selecting them.
- A transparent background in the frames is kept in the PNG.
- A small gap helps if a scaled sprite shows edges of the neighboring frame.