CSS sprite generator
Combine images or SVG icons into a single sprite, compute the background-position and background-size for every tile, and export ready-to-use CSS plus a PNG.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Files never leave your browser — everything runs locally
Retina usage: the exported PNG is twice the size, so the CSS halves background-position / background-size and stays crisp on high-DPI screens.
No sprite generated yet
What this tool does
- Merge a pile of small icons into one sprite and let the tool compute every background-position instead of measuring offsets by hand.
- No image assets yet? Paste a "name WxH" placeholder list to lock down the layout and CSS, then swap in the real files later.
- Support high-DPI screens: with 2x export the CSS widths and offsets are halved and background-size is added, while the PNG stays at double size.
- Compare layouts with different column counts and gaps to find the smallest sprite with the least wasted space.
Example
Input
home 32x32 user 24x24 star 16x16 (2 columns, 4px gap, base class name sprite)
Output
/* sprite · 3 images · 60 × 52 */
.sprite {
background-image: url("sprite.png");
background-repeat: no-repeat;
}
.sprite-home {
width: 32px;
height: 32px;
background-position: 0px 0px;
}
.sprite-user {
width: 24px;
height: 24px;
background-position: -36px 0px;
}
.sprite-star {
width: 16px;
height: 16px;
background-position: 0px -36px;
}Placement is column-major: image i lands in column i % columns, row floor(i / columns). background-position uses negative offsets, so the first tile is 0px 0px.
Frequently asked questions
Are my images uploaded to a server?
No. Files are read into memory through the File API, the sprite is drawn on a local canvas, and the exported PNG is produced by the browser. The page makes no network requests.
What exactly does 2x export change?
The exported PNG is twice the size, and width, height, background-position and background-size in the CSS are all emitted at half. Ordinary screens display it at CSS pixel size while high-DPI screens fill in with the extra pixels, so edges stay sharp.
Why is the sprite larger than the images added together?
Each column is as wide as its widest image and each row as tall as its tallest, plus the gap you set (applied between both columns and rows). That keeps differently sized tiles aligned; set the gap to 0 for the tightest packing.
How are the class names generated?
The base class defaults to sprite and each tile becomes sprite-<name>, where the name loses its extension, is lower-cased and has non-alphanumerics replaced by hyphens. Names that are entirely CJK or symbols fall back to sprite-image-1, sprite-image-2 and so on.
What format does the pasted list need?
One "name WxH" per line, where the multiplication sign may be x, × or *, and the name can contain spaces (or be omitted to get a numbered name). Width and height must be greater than 0; a line that cannot be parsed raises an error instead of being skipped silently.
Keywords：雪碧图css spritesprite generator精灵图background-positionretina图标合并css 精灵