Free CSS Sprite Generator
Combine multiple images into a single CSS sprite sheet for faster web performance. Instant sprite packing with CSS positions and JSON data.
Free Sprite Sheet Generator Online
Clean atlas packing and frame slicing for Unity, Godot, and Phaser
Drop frames, auto-pack them, inspect the atlas, then export engine-ready data.
Advanced controls stay tucked away until you need them.
Generated atlas
Your packed atlas preview
Your atlas will appear here
Upload PNG / JPEG / WebP. Packing stays in your browser.
Frame strip
Drag to reorder · order maps left→right, top→bottom in grid mode
Keep Jaconir Lab Free
To provide these tools without logins or fees, we use curated sponsorships and minimal push notifications to cover server costs. Thank you for supporting frictionless science!
Upload
PNG · JPEG · WebP
Layout
How sprites are arranged on the atlas
Bin-packs each sprite tightly. Best default for mixed sizes and photos.
Selected sprite
SettingsShowHide
Optimize Web Performance
Optimized Packing
Automatically minimizes wasted space using advanced bin-packing algorithms.
Precision Controls
Fine-tune padding, extrusion, and layout for pixel-perfect results.
Multi-Format Export
Export as PNG, JSON, CSS, and engine-specific manifest files.
Workflow
Upload Assets
Drag your PNG, JPG, or SVG assets into the packer workspace.
Optimize
Choose packing algorithm to minimize atlas size and transparent waste.
Copy CSS
Download the packed sprite sheet and copy the generated CSS coordinates.
Deploy
Improve your site LCP and reduce HTTP requests instantly.