Sprite Sheet Generator
Create optimized sprite atlases with CSS/JSON code generation
👇 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
How to Use Sprite Sheet Generator
1Add Images
- • Click "Add Images" or drag & drop sprite images
- • Supports PNG, JPG, JPEG, WebP formats
- • Use I don't know 🤣 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:
Smart packing algorithms
Animation frame support
JSON metadata export
Game engine compatibility