Loading tool…
Icons, animation frames and game tiles are easier to ship as one image. Add your files, arrange them in a grid or strip, and export the sheet together with ready-made CSS classes and a JSON frame map. Nothing is uploaded; the sheet is built on a canvas in your browser.
Processing locally on your device
Overview
A sprite sheet, also called a texture atlas, is one image that contains many smaller ones, together with a map of where each one sits. Game engines draw from one texture far more efficiently than from dozens, because the GPU can batch draw calls instead of switching textures. On the web, CSS sprites show one icon at a time by setting background-position on a shared image, which saves requests and avoids icons flickering in on hover.
This generator offers three layouts. Grid arranges sprites in rows, with an automatic column count of the square root of the sprite count, rounded up, or a column count you choose. Horizontal and vertical strips put everything in one row or column, the format most CSS steps() animations and many engines expect for frame sequences. Padding of 0–32 px between sprites keeps neighbouring pixels from bleeding into each other when a texture is scaled or filtered.
Sprites can be placed two ways. With uniform cells on, every cell is the size of the largest image and each sprite is centred inside it, which keeps animation frames aligned and makes every frame the same size. With it off, rows are packed: each sprite keeps its own size and each row is as tall as its tallest member, which wastes less space for mixed icon sets. You can reorder sprites by dragging or with the arrow buttons, sort by name, rename them and remove any you don't need.
Alongside the image you get two data files. The CSS file defines a base class with the sheet as background image and one class per sprite with its width, height and background-position. The JSON file maps each sprite name to x, y, w and h, either in a simple format or as a TexturePacker-style JSON Hash, which Phaser and PixiJS load directly. Export the sheet as PNG, or WebP with a quality setting, on a transparent or solid background, or download everything as a ZIP.
| Sheet size | Pixels | Uncompressed GPU memory (RGBA) | Safe for |
|---|---|---|---|
| 1024 × 1024 | 1.05 million | 4 MB | Virtually all devices |
| 2048 × 2048 | 4.19 million | 16 MB | Almost all phones and browsers |
| 4096 × 4096 | 16.8 million | 64 MB | Most modern phones and desktops |
| 8192 × 8192 | 67.1 million | 256 MB | Desktop GPUs, high-end mobile |
Drop your sprite images onto the page or browse for them; add more at any time.
Choose Grid, Horizontal or Vertical layout, set the columns (or leave Auto) and the padding.
Turn on Uniform cells for animation frames, or leave it off to pack mixed sizes tightly.
Reorder, rename or remove sprites in the list, and hover the preview to check names and outlines.
Pick PNG or WebP and the background, then download the sheet, the CSS, the JSON or a ZIP of all three.
Use cases
Pack character frames, tiles and items into one texture, then load the JSON Hash file in Phaser or PixiJS to reference each frame by name. Padding of 1–2 px prevents texture bleeding when sprites are scaled.
Put exported animation frames into a horizontal strip with uniform cells, then animate background-position with steps() equal to the frame count. Every frame has the same width, so the animation never jitters.
Combine small PNG icons into one image and use the generated classes such as .sprite-home and .sprite-search. A single request makes hover states appear instantly.
Collect buttons, panels or map tiles into a grid with a fixed column count so tile indices stay predictable, and use the JSON coordinates in your engine or level editor.
Pro tips
Answers to common questions about the sprite sheet generator.
The terms overlap. A sprite sheet often means a regular grid or strip of animation frames, while a texture atlas is any packed collection of images with a data file describing their positions. This tool produces both: the image plus CSS and JSON coordinates.
Upload the sheet next to your stylesheet under the same file name, include the CSS, and add two classes to an element, for example class="sprite sprite-home". The base class sets the background image; the sprite class sets the size and background-position.
Simple gives a compact map of each name to x, y, w and h, which is easy to read in your own code. JSON Hash follows the TexturePacker structure with frame, rotated, trimmed, spriteSourceSize and sourceSize fields, which Phaser and PixiJS can load as an atlas.
With it on, every cell is as big as the largest image and smaller sprites are centred inside, and the CSS and JSON use the cell size. With it off, sprites keep their own sizes and are packed row by row, which saves space for mixed icon sets.
Browsers cap a canvas at 16,384 pixels per side, and the tool warns you before you reach it. Safari on iPhone and iPad also limits canvases to about 16.7 megapixels in total, so the tool flags larger sheets. A grid layout keeps sheets closer to square and within limits.
No. ToolEnhancer processes files on your own device inside the browser. They are never sent to, stored on or seen by our servers.
Yes. The sprite sheet generator is free to use with no sign-up, no watermarks and no daily limits.
Strip location and camera metadata from photos.
Pick any pixel colour from an image.
Extract dominant colours as HEX, RGB and HSL.
Inspect RGB and luminance histograms.
Diff two images side by side or overlaid.
Encode images as data URIs for HTML and CSS.