Sprite Sheet Generator
Generate CSS sprites from multiple images for better web performance
Upload multiple images to combine them into a single sprite sheet. Images are processed in your browser - nothing is uploaded to any server.
Already have a sprite sheet and just want to add a new image, or grab the CSS position of a single sprite? Use SpriteCow to click a sprite on your sheet and copy its background-position.
Combine images into one sprite sheet
Select your icons or frames, choose a layout, and the sprite sheet generator draws them onto one PNG and writes a CSS class for each image. It works as a CSS sprite generator for websites and as a simple sprite sheet maker for game frames. Download the sheet as sprite.png, copy the CSS, and each icon shows with two class names.
PNG, JPG, GIF and WebP files work; other files in the selection are skipped. Images keep the order of the file list, which is usually alphabetical, and are drawn at their real size. The images never leave your browser.
The CSS you get
Three icons, Row layout, 2 px padding, class prefix icon. The sheet is 92 × 32 px:
.icon {
background-image: url("sprite.png");
background-repeat: no-repeat;
display: inline-block;
}
.icon-home {
width: 32px;
height: 32px;
background-position: 0 0;
}
.icon-search {
width: 32px;
height: 32px;
background-position: -34px 0;
}
.icon-cart-icon {
width: 24px;
height: 24px;
background-position: -68px 0;
}<span class="icon icon-home"></span>
<span class="icon icon-search"></span>
<span class="icon icon-cart-icon"></span>Each class name is the prefix plus the file name, with anything other than letters, digits, hyphens and underscores turned into a hyphen, so cart icon.png becomes icon-cart-icon. Two files with the same name get -2, -3 and so on. The search icon starts at 34 px because the 32 px home icon is followed by 2 px of padding.
Row, column or grid
| Layout | How images are placed | Good for | Three icons above |
|---|---|---|---|
| Row | Side by side, top-aligned | Icons of one height, such as a toolbar | 92 × 32 px |
| Column | Stacked, left-aligned | Wide images, such as buttons or flags | 32 × 92 px |
| Grid | Equal cells the size of the largest image, as close to a square as possible | Many icons, and animation frames for game engines | 66 × 66 px |
Padding is the empty space between images, 2 px unless you change it. Without it, a zoomed page or a scaled icon can show a thin line of the neighbouring image at its edge. Sheets can be up to 16,384 px on a side, a size current browsers can draw; the tool warns you when a long row or column of large images goes over, and Grid usually fits them.
When a CSS sprite is still the right choice
-
Many small raster icons
HTTP/2 made extra requests cheap, but one sheet still caches as one file and every icon is there on first paint, with no flicker on hover states. When an icon changes, give the sheet a new file name, as cache busting explains.
-
Not for SVG icons
Single-color vector icons scale and recolor better as inline SVG or an SVG symbol sprite. This tool outputs a PNG, so use it for raster images.
-
Animation frames
With Grid, every frame sits in a cell of the same size, which is what game engines that cut a sheet by frame width, height and spacing expect. Name files walk-01, walk-02 so they stay in order.
Sprite sheet questions
Build the sheet from images at twice the size, then halve everything in the CSS: add background-size with half the sheet's width, and halve each width, height and position. The generator doesn't do the halving for you.
They are drawn as a single still frame, because the sheet is one PNG image.
Not inside the tool. Images follow the order of the file list, so rename them, for example with a number in front, and select them again.
Not here: the generator builds new sheets from separate images. To read the position of one sprite on an existing sheet, SpriteCow lets you click it and copy its background-position.
No. The sheet is drawn on a canvas in your browser and downloaded from there.