About the CSS Sprite Generator
What is a CSS sprite generator?
A sprite sheet is one image holding many small ones. You show a single piece of it by giving an element a fixed width and height and pushing the image around underneath with background-position. The browser downloads one file instead of thirty, and the icons never flicker in one at a time.
The tedious part has always been the numbers. Every sprite needs its own width, height and a pair of negative offsets, and reading those out of an image editor by hand is slow and easy to get wrong by a pixel. This tool reads them for you. Click a sprite and it measures the shape actually sitting under your pointer, edge to edge, and writes the rule.
There's a button that does the whole sheet in one go, which is the part most tools leave out. It walks the image, finds every separate shape, joins the pieces that clearly belong together, such as the dot over an i, and hands back a named list you can rename and trim. Your sheet is read in the browser and never uploaded anywhere.
How to Use This Tool
- Load your sheet. Drop it on the frame or choose a file. PNG and WebP with transparency work best, though a sheet on a solid background is fine too.
- Say what the background is. Transparency is the default. If your sheet sits on white or another flat color, switch to that and the corner color is picked up for you.
- Click your sprites. Each click measures the shape under it and adds a box. Use the zoom for small icons, and switch to grid mode if the sheet is a uniform set of cells.
- Or find them all. One button collects every shape on the sheet at once. Raise the ignore threshold if stray specks are being picked up.
- Name them. The names become class names, so home and cart beat sprite1 and sprite2. Anything unusable is cleaned up rather than pasted in raw.
- Take the output. Plain CSS, an SCSS map with a mixin, Tailwind classes or a JSON map. Turn on the 2x switch if the sheet is a retina one and every number is halved for you.
Common Use Cases
Sprite sheets went quiet for a while and then came back, because the cases where they win are still real.
- Icon sets on older stacks: anywhere an inline SVG system isn't an option, one sheet is still the cheapest way to ship fifty icons.
- Game and pixel art assets: character frames and tiles arrive as sheets by default, and this gives you the frame coordinates without counting cells.
- Flag and payment logos: long rows of near identical images that would otherwise be dozens of separate requests.
- Email and locked down templates: where a single background image is allowed and an icon font or SVG sprite is not.
- Reading somebody else's sheet: a bought or inherited theme with no documentation, where you just need the coordinates of one icon.
- Checking a build: a sheet made by a bundler can still have wrong padding, and seeing the detected boxes drawn over it shows that immediately.
Frequently Asked Questions
Does this build a sheet from separate images?
No, this one goes the other way. It reads a sheet you already have and gives you the CSS for the pieces inside it. If you need to combine loose images into one file, the image sprite sheet generator does that, and it's the tool you'd normally reach for first.
Why are the positions negative?
Because you're moving the image, not the window onto it. The element is a fixed size box and the sheet slides underneath it, so bringing a sprite that lives 64 pixels along into view means pushing the image 64 pixels left, which is background-position: -64px 0. Getting the sign backwards is the single most common mistake with sprites.
How does it decide where a sprite ends?
It starts at the pixel you clicked and spreads outwards to every touching pixel that isn't background, then takes the box around the result. Pieces sitting within a couple of pixels are pulled in as well, which is what stops a dotted letter or a detached highlight from being treated as a separate icon.
What does the 2x switch do?
A retina sheet is drawn at twice the size, so every measurement it reports is twice what you want in CSS. Turning the switch on halves all of them and adds a background-size holding the sheet's own halved dimensions, which is the piece people forget. Without it the sheet paints at full size and every sprite shows its neighbors.
My whole sheet came back as one sprite. Why?
The background isn't transparent, so every pixel counts as part of the picture and the shapes are all connected. Switch the background setting to a solid color and it will use the corner color of your sheet. Compression artifacts around each icon are handled by the tolerance built into that check.
Are sprite sheets still worth using?
Sometimes. Over HTTP/2 the many requests argument mostly went away, so an inline SVG set is usually the better answer for icons now. Sheets still win when the art is genuinely raster, when you're stuck with an older toolchain, or when the images are photographic and would be huge as SVG.
Can I use this on a sheet with a transparent drop shadow?
Yes, and the shadow becomes part of the measured box, which is usually what you want since the shadow has to be inside the element to be visible. If you'd rather cut it off, raise the alpha threshold on the ignore setting so faint pixels stop counting, or fall back to grid mode and give the exact cell size.
Once you have the sheet working, the CSS cursor viewer covers the pointer states for anything clickable, and the CSS button generator handles the rest of the control. They sit alongside a whole set of free developer tools.