CSS Sprite Generator
Glues icons into one file with ready-made CSS: class names from file names, an archive with the sprite, styles and an example. Everything runs in your browser, nothing is uploaded.
Download
The archive contains sprite.png, sprite.css and demo.html — open it to see all the classes.
The sprite came out larger than 8000 pixels on a side — remove some images or change the layout.
The sprite turned out noticeably heavier than the source images. That happens with photographs: PNG stores them losslessly and grows large. Sprites are made for small icons; photographs are better off as separate JPG files.
CSS
Usage: — the base class attaches the image, the second one sets the window and position.
There are three layout options: compact, vertical, and horizontal. The compact layout packs the images as tightly as possible, while the vertical and horizontal layouts are handy when you plan to adjust the coordinates by hand.
Class names come from the source file names, so the structure stays recognizable in your markup: the file arrow-left.png produces the class .arrow-left. Renaming the images before combining them is easier than fixing the styles afterwards.
The sprite is built as a PNG or a JPG. PNG keeps transparency and works for icons placed over a colored background; JPG suits photographs and produces a smaller file, but it softens the edges of images that have no transparency.
The point of combining images is that the browser downloads one file instead of dozens. Modern protocols fetch files in parallel, so the time saving is smaller than it used to be. Still, a set of icons stays a single file that is easier to include and to update.
Rate this tool
Help us get better
Tell us what was missing.
Other tools
Favicon Generator
A full set of site icons from an image, letter or emoji.
Add Text to Image
A caption or watermark on photos, with batch processing.
Photo Watermark
A semi-transparent caption or tile across the whole image.
Photo Editor
An image editor in the browser, nothing to install
Image Color Palette
A palette from a picture, with color shares and a contrast check
Resize Image
Image size by width, height or percent, saved as JPEG, PNG or WebP
Crop Image
Frame by mouse or exact pixels, everything happens locally
QR Code Scanner
QR reading from an image or camera, contents split into fields