Sprite Sheet Generator

Combine multiple images into one sprite sheet with CSS, SCSS, or JSON coordinates

👇 Scroll down for a quick step-by-step guide

Drop your sprites here

or click anywhere to browse files

PNGJPGWEBPGIF

Generated CSS

Upload images to generate code

CSS classes and JSON coordinates will appear here

Before you start with Sprite Sheet Generator

Pack multiple images into a sprite sheet with padding controls and CSS, SCSS, or JSON coordinate output in the browser.

Best for

Combining individual game frames or UI icons into one PNG atlas
Generating CSS, SCSS, or JSON coordinates alongside the sheet
Creating a simple shelf-packed sheet directly in the browser

Know before you start

The packer places images in rows; it is not a general-purpose bin-packing optimizer
Padding and scale choices affect the final sheet dimensions
Large batches use browser memory while every image is decoded

Continue the workflow

Sprite Sheet SlicerSplit an existing atlas into separate frames.Pixel Art UpscalerEnlarge pixel-art frames before packing them.Image CompressorReduce the exported sheet size for delivery.Sprite atlas packing guideLearn about padding, power-of-two sizes, and bleeding.CSS sprites guideDecide when a CSS sprite still makes sense.Unity sprite sheet importBring the generated atlas into Unity.

How to Use Sprite Sheet Generator

1Add Images

• Click "Add Images" or drag & drop sprite images
• Supports PNG, JPG, JPEG, WebP formats
• Use Auto-optimize for auto-optimization

2Configure Canvas

• Canvas: Set dimensions (Custom/Max mode)
• Resize: Scale sprites with percentage slider
• Spacing: Adjust padding between sprites

3Generate Code

• Format: Choose CSS, SCSS, or JSON output
• Naming: Set sprite naming pattern
• Sort: Order by size or name

4Download Assets

• Click "Download PNG" for sprite sheet image
• Click "Download Code" for CSS/JSON coordinates
• Use "Clear" to start over with new sprites

Key Features:

Row packing with padding control

Resize sprites before packing

CSS, SCSS & JSON output

Runs in your browser, no upload

Sprite Sheet Generator Questions

What does a sprite sheet generator do?

It packs separate image files into one atlas image. Keeping related sprites together can make an asset easier to ship, while the generated coordinates tell CSS or game code where each sprite lives inside the sheet.

Which code formats can I export?

The tool can generate CSS, SCSS, or JSON coordinate data alongside the PNG sprite sheet. The JSON contains the frame positions and dimensions, so you can adapt it to the asset format your game engine or application expects.

Are my images uploaded to a server?

No. The images are decoded and packed in your browser. The source files and generated sheet are not sent to an ImageMint upload server.

Why does padding matter in a sprite atlas?

Padding leaves space between neighboring sprites. Without enough separation, texture filtering or scaled rendering can sample a nearby sprite and create colored bleeding at the edge.

Related Sprite Workflows

To cut an existing atlas back into separate frames, use the Sprite Sheet Slicer . The sprite atlas packing guide explains padding and edge bleeding. For engine-specific follow-up, see the Unity import guide and Godot import guide.