Combine images into a sprite sheet with CSS and JSON output -- free, private, runs in your browser
Read more: How to Build a Sprite Sheet from Images
A sprite sheet (or texture atlas) combines multiple images into a single file. Instead of loading 20 small images as 20 separate HTTP requests, you load one sprite sheet as a single request and use CSS or game engine coordinates to display individual sprites. This means faster page loads, fewer network requests, and simpler asset management.
Sprite sheets are used everywhere: web developers use CSS sprites for icons and UI elements, game developers use them for character animations and tile sets, and pixel artists use them to package animation frames for engines like Unity, Godot, Phaser, and RPG Maker.
CSS sprites use background-image with background-position to show a specific region of a larger image. You set the element's width and height to match the sprite dimensions, then offset the background to reveal just that sprite. The Sprite Sheet Builder generates the CSS automatically -- paste it into your stylesheet and add the appropriate class to your HTML elements.
For example, if your sprite sheet has a 32x32 icon at position (64, 0), the CSS would set background-position: -64px 0px with width: 32px; height: 32px. The negative offset slides the background image so the correct sprite is visible through the element's window.
Game engines use sprite sheets for character animations, tile sets, UI elements, and particle effects. The JSON metadata output from this tool provides frame coordinates that are compatible with most engine importers. Each sprite entry includes its name, x/y position, width, and height -- the standard format expected by Phaser, Godot, Unity sprite importers, and similar tools.
For animation sprite sheets, arrange your frames in order (left-to-right, top-to-bottom) by dragging the thumbnails in the frame strip before building the sheet. The JSON output preserves this order.
Sprite sheets are best when you have many small images that load together: icon sets, animation frames, UI components, tile maps. Fewer HTTP requests means faster loading, especially on mobile networks.
Individual images are better when images are large, loaded on demand, or change independently. If you only need three of twenty icons on a given page, loading all twenty in a sprite sheet wastes bandwidth.
The sweet spot for CSS sprites is 10-50 small images (icons, buttons, badges) that appear together on most pages. For game assets, sprite sheets are almost always preferred since the engine loads the entire sheet into GPU memory once.
Keep under 2048x2048 for mobile GPU compatibility. 4096x4096 is safe for desktop. This tool calculates the optimal sheet size automatically based on your images and grid settings.
For CSS sprites, no -- each sprite is referenced by its class name and coordinates. For animation sprite sheets used in game engines, arrange frames in the correct order (left-to-right, top-to-bottom) by dragging thumbnails in the frame strip.
For pixel art, no (0px padding). For anti-aliased images used in game engines, 1-2px prevents color bleed during bilinear filtering. For CSS sprites, 0px is usually fine since browsers use nearest-neighbor sampling for background-position.
Yes. Click "Copy CSS" to get a ready-to-use stylesheet snippet. Each sprite gets a class with the correct background-position, width, and height. Paste it into your CSS and add the class names to your HTML elements.
Upload PNG, JPG, or WebP images. The output sprite sheet is always PNG to preserve transparency and pixel-perfect quality. Mixed input formats work fine -- each image is drawn to the canvas regardless of its source format.