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.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Combining icons into one image with the background-position CSS generated.
- Consolidating many small requests into one on an HTTP/1.1 site.
- Producing the CSS classes alongside the sprite sheet.
- Getting an HTML snippet to test the sprite with.
- Replacing a set of individual icon files.
Frequently Asked Questions
- What is a CSS sprite?
- Several images combined into one file, with `background-position` selecting the region to show. It was the standard technique for reducing HTTP requests when every one cost a full round trip on a connection limited to six per host.
- Is it still worth doing?
- Much less than it was. HTTP/2 multiplexes requests over one connection, so the request-count argument mostly evaporated. Sprites still help when a single cached file is preferable to many, and they still hurt cache granularity — changing one icon invalidates the whole sheet.
- How is the position calculated?
- As negative offsets — an icon at (64, 32) in the sheet is `background-position: -64px -32px` on an element sized to the icon. The negatives are what confuses people: you are moving the image, not the window.
- Why does the wrong icon bleed in at the edges?
- Sub-pixel rounding, usually after a transform or on a fractional device pixel ratio. Padding each icon in the sheet with a few transparent pixels prevents the neighbour appearing, which is why generated sheets leave gutters rather than packing tightly.
- What should I use instead for icons?
- An SVG sprite with `<use>`, which scales cleanly, recolours with `currentColor`, and does not need pixel-perfect positioning. A raster CSS sprite is now mainly for photographic thumbnails or for supporting something that cannot render SVG.
Common errors and gotchas
- Building a sprite for an HTTP/2 site, where many small requests are cheap and a sprite is a liability.
- Omitting padding, so neighbouring icons bleed in when the page is scaled or zoomed.
- Regenerating the sheet without regenerating the CSS, so every position is silently wrong.
- Using a raster sprite for icons that need to scale, where SVG is the better answer.
- Losing the generated CSS, without which the sheet is unusable.