Sprite Sheet Generator
Pack images into one sprite sheet with CSS or a JSON atlas.
Many Images, One File, Exact Coordinates
Drop in a set of icons, animation frames or tiles and they are packed into a single sprite sheet, with the CSS that shows each one by its class name — so a page loads one file instead of dozens. For games, the same sheet comes with a JSON texture atlas in the widely supported TexturePacker “hash” format read by Phaser, PixiJS and most engines.
Choose a tightly packed layout for the smallest sheet, an even grid for animation frames, or a single row or column. Padding between images prevents neighbours bleeding into each other when sprites are scaled or filtered. The sheet is a lossless PNG, so transparency and pixel art stay exact.
Key features
- Packed, grid, row or column layouts.
- CSS classes with background positions.
- JSON texture atlas for game engines.
- Adjustable padding against edge bleeding.
- Lossless PNG output.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Sprite Sheet Generator
- Drop in your images
Up to 500; file names become class and frame names. - Pick a layout and padding
The fill percentage shows how efficient the sheet is. - Set the class prefix and file name
They are used in the generated CSS. - Download the PNG and code
CSS for websites, JSON for games.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Are CSS sprites still useful with HTTP/2?
Less than they were, since HTTP/2 makes many small requests cheap. They still help for large icon sets and are standard for game graphics, where one texture is far faster for the GPU than many.
What is a texture atlas?
A single image holding many sprites, plus data giving each sprite’s rectangle. Game engines load the atlas once and draw any sprite by its name.
Why add padding?
When sprites are scaled or drawn at fractional positions, the renderer samples neighbouring pixels. Padding keeps those samples transparent instead of taking colour from the next sprite.
Which layout should I use for animation frames?
Grid: every cell is the same size, which is what frame-based animation expects. Name the files in order — walk-01.png, walk-02.png — and the frames keep that order in the sheet and the atlas, so an engine can play them as a sequence.
Are my images uploaded?
No. Packing and drawing happen in your browser.