CSS Sprite Sheet Generator
Arrange the images and inspect the sprite preview. Generated CSS gives each image its size and background position within the sheet.
Runs locally in your browser · PNG · CSS · ZIP
Arrange the images and inspect the sprite preview. Generated CSS gives each image its size and background position within the sheet.
Runs locally in your browserCSS Sprite Sheet Generator belongs to the image tools on KivTools. The workbench above handles the whole job on one screen: files chosen from your device, then a rendered image.
The conversion runs inside the page with browser JavaScript. Nothing you enter is uploaded, the tool keeps working offline, and it is safe for data you are not allowed to send to a third party.
Binary formats carry more than the content you see: metadata, colour profiles, embedded fonts and, in practice, a fair amount of information you did not intend to publish. These tools transform or inspect a file while keeping the payload intact.
Two traps dominate: quality lost through repeated re-encoding, and metadata left in place after an edit. Compress once from the original, and inspect what the file still declares about you before sharing it.
Browsers, desktop tools and command-line utilities should agree on the result; a mismatch usually means a different encoding, locale or version. Open the result in a viewer you trust and check size, dimensions and, where it matters, the metadata panel rather than the file name.
Some formats are containers for other formats, so the extension alone does not tell you what is inside; when a system rejects a file, look at the actual header bytes before renaming it. Keep a copy of the input while you experiment, so a wrong setting never destroys the source.
Accepts up to 50 browser-readable images plus layout, columns, padding and class prefix; outputs a PNG preview, CSS code and ZIP containing both files.
Combine small UI icons into one request, build a sprite for static game assets, and generate repeatable CSS coordinates without manual measurement.
Every source image is decoded and drawn to Canvas locally; the generated PNG, CSS and ZIP remain in the browser until downloaded.
Images keep their original pixel size inside equal cells; very large source dimensions can exceed browser Canvas limits and animated images use one frame.
Yes. Every tool on KivTools is free, needs no account and has no usage quota. There is no paid tier hiding behind the workbench, and no email address is required to use the result.
Inside your browser. The page loads a script once and the conversion happens on your machine, which is also why the tool still works when the network drops.
Accepts up to 50 browser-readable images plus layout, columns, padding and class prefix; outputs a PNG preview, CSS code and ZIP containing both files. Large inputs are usually handled without trouble, but extremely large ones are better processed in a local command-line tool.
Dimensions decide file size more than the quality slider does. Compare a small known-good sample first when the output feeds an automated pipeline.
The output is yours: no watermark, no licence tag, no attribution requirement. Check the underlying format or library licence when the result ships in a product.
The page works in any modern mobile browser, and the layout collapses to a single column on small screens. Local tools keep working offline once the page has loaded.