Deterministic order
Rearrange sprites precisely and regenerate without renaming source files.
✓ Images never uploaded✓ Unique class names✓ Safe canvas validation
010203→ATLAS
Drop sprite images here
or click anywhere in this area to browse
Choose spritesJPG, PNG, WebP, GIF or BMP · Up to 100 files · 10 MB / 25 MP eachDesigned for real asset workflows
From loose images to usable coordinates
Two code formats
Use ready-made CSS background positions or a JSON frame manifest for engines and build tools.
High-density output
Create retina pixels while preserving logical sizes through CSS background-size.
Flexible fitting
Contain, cover, stretch or center each source inside consistently sized cells.
How to create a sprite sheet
Add sprites
Select icons, frames, tiles or other image assets.
Arrange
Set the final order using drag and drop or arrows.
Configure
Choose cells, columns, spacing, fit and density.
Export
Download the atlas plus CSS or JSON coordinates.
Frequently asked questions
What is the difference between padding and gap?
Padding reserves space inside every sprite cell around its image. Gap separates one full cell from the next and is reflected in exported coordinates.
How are duplicate filenames handled?
The generator sanitizes names and adds numeric suffixes when needed, preventing duplicate CSS selectors and JSON keys.
Why is the canvas size limited?
Browsers and GPUs impose maximum canvas dimensions and memory limits. ZeeSharp checks both dimensions and total pixels before generating to avoid crashes.
Are animated images preserved?
No. An animated GIF or WebP contributes one browser-decoded still frame to the static PNG atlas.