CSS Sprite Generator
Combine multiple images into one sprite sheet with generated background-position CSS.
Drop images or click to browse
PNG, JPG, WebP, SVG — select multiple files. Processed entirely in your browser.
No images loaded yet.
How the CSS Sprite Generator works
A CSS sprite sheet combines many small images (icons, buttons, UI states) into a single PNG so the browser makes one HTTP request instead of dozens. Each element then shows just its slice of the sheet using a fixed width, height, and a negative background-position offset that shifts the sheet so the right sub-image lines up in the visible box.
Drop in your images, reorder them by dragging rows (or the ↑/↓ buttons), pick a horizontal strip, vertical strip, or fixed-column grid layout, and set a gap to avoid bleeding between neighboring frames. Grid layout uses a uniform cell sized to your largest image so every row and column lines up cleanly. Click Generate sprite sheet to render the combined PNG and get ready-to-use CSS classes plus an HTML snippet — everything runs on a canvas in your browser, no files are uploaded anywhere. For single-image resizing before building a sprite, try the Image Resizer.
Private & free — this tool runs entirely in your browser.