CSS Sprite Generator

Features

• Drop several images at once and get a single packed PNG sprite
• Generates each icon’s CSS: background-position plus width and height
• Three layouts: automatic and compact, one row, one column
• Adjustable gap, so neighbours do not bleed into each other when scaled
• @2x mode halves positions and sizes and writes background-size
• Class names derived from file names, sanitised into valid selectors
• Duplicate names get a suffix, so two icons never share one rule
• The CSS arrives as a separate text output — copy it or download it as .css
• Images are never uploaded; works offline

How to use

1. Drop several icons onto the dashed area (or pick multiple files)
2. Choose the layout and gap; tick @2x if the icons are 2× assets
3. Download the packed PNG and copy the generated CSS
4. Put the PNG in your project and point the url() at its real path

FAQ

Do sprites still make sense?

It depends. HTTP/2 and HTTP/3 made extra requests much cheaper, and SVG icons can be inlined as a single `<symbol>` set. But when there are many tiny bitmap icons (game UI, older admin panels, toolbars), sprites remain the simplest win: one request instead of dozens, with no change to your build. Conversely, with a dozen icons, plain SVG is clearer and far easier to recolour.

Why keep a gap of 1–2px?

Because scaling the whole sprite with `background-size` (the usual way to support high-density screens) makes the browser interpolate: sampling an icon’s edge pixel pulls in the neighbouring icon too, which appears as a strip of the wrong colour. One or two fully transparent pixels break that path. At 1× scale, zero is fine.

What does @2x mode actually do?

It treats the inputs as 2× assets: every icon’s `width` / `height` and `background-position` is halved in the CSS, and the base class gets `background-size` set to half the sprite’s dimensions. Icons then render at logical size on normal screens and at full pixel density on high-DPI ones. Getting the box wrong shows up as icons twice as large (no halving) or as only a small top-left fragment (missing background-size).

How are the class names decided?

The file name loses its extension and is sanitised down to lowercase letters, digits and hyphens, then your prefix is added. Sanitising is not optional: class names go into CSS and HTML, and CJK characters, spaces or quotes in a file name would break the selector or escape an attribute. A name with nothing usable left (an all-CJK file name, say) becomes icon-1 by position, and two icons colliding on a name get a numeric suffix (-2, -3) so their rules do not overwrite each other.