🛝Toolio
All tools

🗂️ Sprite Sheet Generator

Pack multiple images into a single optimized PNG sprite sheet and get ready-to-use CSS background-position rules — free, in-browser, no upload required.

🗂️
Drop images here, or click to select several
Packed into one PNG + CSS — in your browser, no upload

About

This tool uses the browser Canvas API to shelf-pack your images into a compact PNG sprite sheet entirely on your device — nothing is uploaded to any server. Drop as many images as you need, set the maximum row width and per-sprite padding, and the packer arranges them row by row to minimize wasted space. Once generated, you can download the combined PNG and copy the CSS snippet, which contains a class per sprite with the correct background-image, background-position, width, and height values ready to paste into your stylesheet. Because everything runs locally in your browser, the process is instant and completely private.

How to use

  1. Drop your images onto the upload area, or click to browse and select multiple files at once.
  2. Set the maximum row width (in pixels) and the padding around each sprite to control how tightly they are packed.
  3. Click Generate Sprite Sheet to pack all images into one combined PNG, previewed instantly on the canvas.
  4. Copy the generated CSS — each sprite gets its own class with the correct background-position, width, and height values.
  5. Download the PNG sprite sheet and paste the CSS into your project stylesheet — done.

FAQ

Are my images uploaded to a server?
No. Everything runs in your browser using the Canvas API. Your files never leave your device.
How many images can I add to one sprite sheet?
There is no hard limit — the tool packs as many images as your browser memory allows. For best performance, keep individual sprites reasonably sized.
What does the max row width setting do?
It limits how wide each row of sprites can grow before the packer starts a new row. A larger value produces a wider sheet; a smaller value produces a taller, narrower sheet.
Can I use the generated CSS directly in my project?
Yes. Each sprite class includes the background-image URL (pointing to your downloaded PNG), background-position, width, and height — paste it into any stylesheet and apply the class to your HTML elements.
What image formats can I use as input sprites?
Any format your browser can decode — PNG, JPEG, WebP, GIF, SVG, AVIF, and more. The output sprite sheet is always a single PNG for maximum compatibility.