Sprite Sheet Generator
Pack several images into one sprite sheet PNG with CSS classes and JSON coordinates.
What is a sprite sheet?
A sprite sheet packs many small images, such as animation frames, icons or button states, into one larger image. Game engines read animations from it, and websites use the CSS sprite technique to turn dozens of HTTP requests into one.
What you get
- A single PNG containing every frame
- Ready CSS classes with background-position values for each frame
- A JSON map with x, y, width and height of each frame for game engines and JavaScript
Settings
Choose the number of columns, spacing between frames, outer padding and background. The CSS and JSON update instantly as you change settings. Images are processed in your browser.
How to use Sprite Sheet Generator
- Choose the images for the sprite sheet.
- Set the order, columns and spacing.
- Check the PNG and the CSS/JSON output.
- Download the sprite sheet and copy the code into your project.
Why use this tool?
Build sprite sheets quickly without paid tools like TexturePacker or calculating coordinates by hand.
FAQ
In what order are images placed?
In the order of the file list, left to right and top to bottom. Use the arrows to change the order.
Can I use images of different sizes?
Yes. Each frame's position and size is listed separately in the CSS and JSON output.
Which game engines does it work with?
The JSON map is a simple coordinate list that Phaser, PixiJS, Unity or Godot can read easily.
Related tools
Image Splitter (Grid)
Split an image into a 2×2, 3×3, 4×4 or custom grid and download the tiles individually or as a ZIP.
Open toolCombine Images Side by Side
Put two or more images next to each other in one picture with spacing, alignment and background options.
Open toolFavicon and ICO Generator
Create favicon.ico and PNG site icons from 16×16 up to 512×512 from your logo.
Open toolImage to Base64 Converter
Convert an image into Base64 text or a data URL ready for HTML, CSS or JSON.
Open tool