Sprite Sheet Generator — PNG + JSON + CSS

What a sprite sheet is and why it helps

A sprite sheet packs many small images — animation frames, game tiles, UI icons, emoji or flags — into a single larger image. Loading one file instead of dozens reduces HTTP requests and texture switches, which makes web pages and games load and render faster. Each individual sprite is then shown by referring to its rectangle inside the sheet. This sprite sheet generator builds the image and the coordinates for you: drop your files, choose a layout and download a PNG together with a JSON data file and a ready-to-use CSS stylesheet.

All work happens in your browser. The images are drawn onto a canvas locally and the coordinate files are generated in JavaScript, so your artwork is never uploaded and there is no limit on how often you regenerate the sheet while you experiment with settings.

Grid or packed layout

The uniform grid gives every sprite a cell as large as the biggest image and centres each sprite inside its cell. That predictable structure is what most animation systems expect: frame n is always at column n modulo the column count. Packed rows sorts sprites by height and fills rows up to a target width, which wastes far less space when your images have different sizes. In both modes the padding value adds transparent space around every sprite to avoid color bleeding when the sheet is scaled.

Using the JSON and CSS output

The JSON file lists every sprite by a clean name derived from its file name, with its x and y position, width and height, plus the overall sheet size. Game frameworks such as Phaser and PixiJS can load this hash format directly, and it is easy to parse in any language. The CSS file defines a base class that sets the sheet as a background image and one class per sprite with its size and background position, so an icon is just a span with two classes. Change the class prefix to match your project's naming, and keep the PNG next to the CSS file or adjust the URL.