Sprite Sheet Generator
Up to 60 files. They stay on your device. Nothing is uploaded.
The sprite sheet generator packs up to 60 images into a single PNG on a uniform grid and writes the CSS rule for each one. Files are read in your browser and never uploaded, and each generated class is named after its source filename.
How it works
- Every cell is sized to the largest image in the set, so all cells are identical and positions stay predictable.
- Images are placed left to right, wrapping at the column count you choose.
- Optional padding is inserted between cells to stop neighbouring sprites bleeding in when a browser scales the sheet.
- Each sprite gets a class with a negative background-position equal to its top-left coordinate.
Uniform cells are the trade-off this tool makes. A packing algorithm that fits images tightly produces a smaller sheet, but a grid keeps the CSS readable and the coordinates easy to check by hand.
Examples
Twelve icons in four columns
Images
12 icons, largest 32 x 32
Columns
4
Padding
2px
Result
A 134 x 100 sheet, plus a .sprite base class and twelve position rules
Four columns of 32px with 2px padding gives 4 × 34 − 2 = 134 pixels wide, and three rows gives 3 × 34 − 2 = 100 tall. The trailing padding is trimmed.
A single icon rule
Filename
arrow-left.svg, third position
Result
.sprite--arrow-left { background-position: -68px -0px; }The third cell in the first row starts 68 pixels in, two cells of 34, so the background is shifted left by that amount. The class name comes from the filename with the extension stripped.
Frequently asked questions
Are sprite sheets still worth using?
Less than they were. Under HTTP/2 and HTTP/3, many small requests are cheap, which removed the original reason for spriting. They remain useful for icons that must render without any request at all, for canvas and game rendering, and in environments where each request still carries real overhead.
Why is every cell the same size as the largest image?
Because a uniform grid makes coordinates predictable and the CSS readable. Tight packing produces a smaller file but coordinates that cannot be reasoned about by hand, which is a poor trade when you are debugging a misplaced sprite.
What is the padding for?
It stops adjacent sprites bleeding into each other. When a browser scales a sheet (on a high-density display, or with a CSS transform) sampling can pick up a pixel from the neighbouring cell. Two pixels of padding is enough to prevent it.
Do my images get uploaded?
No. Files are read with the browser file API and drawn onto a canvas locally. The page makes no network requests, so the sheet is assembled entirely on your device.