CSS Sprite Generator
Create CSS sprite sheets from multiple images.
Features
CSS Export
One class per image with background-position and dimensions.
Named from Files
Class names derive from your source file names.
Packed Image
Single PNG with all images packed tightly.
Retina-Ready
Export @2x sheets and scale with background-size.
How It Works
Upload Images
Drop icons or images for the sprite.
Pack
Use the atlas tool and choose CSS export.
Download
Get the PNG and a ready-to-use CSS file.
Why Use I Love Sprites?
CSS sprites combine many small images — icons, buttons, logos — into one file, referenced via background-position. One request instead of dozens still matters for HTTP/1.1 sites, and even under HTTP/2 a single sprite avoids per-image overhead and guarantees icons appear atomically instead of popping in one by one.
The generator packs your images and exports a PNG plus a CSS file: one class per source image with its width, height, and negative background-position offsets, named after the source file. Use padding of at least 1-2px between sprites — without it, browser zoom levels that put the sprite at a non-integer scale can show slivers of adjacent icons. For high-DPI screens, export a @2x sheet and set background-size to the sheet's logical dimensions.
Using the exported sprite in your stylesheet
The exported CSS looks like this — add the base class plus an icon class to any element.
.sprite {
background-image: url("sprites.png");
background-repeat: no-repeat;
display: inline-block;
}
.sprite-home { width: 32px; height: 32px; background-position: 0 0; }
.sprite-user { width: 32px; height: 32px; background-position: -34px 0; }
.sprite-cart { width: 32px; height: 32px; background-position: -68px 0; }
/* Retina: pack a @2x sheet, then scale it to logical pixels */
@media (min-resolution: 2dppx) {
.sprite {
background-image: url("sprites@2x.png");
background-size: 300px 100px; /* the @1x sheet dimensions */
}
}Frequently Asked Questions
Common questions about css sprite generator.
A base class with the sprite image plus one class per source image carrying its width, height, and background-position offsets, named after the file.
For icon sets, yes — one atomic download, no per-request overhead, and no icon pop-in. For photos or large images, prefer separate files so they can lazy-load.
Export a @2x sheet, then set background-size to the @1x dimensions in a min-resolution media query — offsets stay the same.
1-2px padding prevents neighboring icons from showing through at fractional browser zoom levels.
Related Tools
Texture Atlas Generator
Pack multiple images into an optimized texture atlas in your browser. Free, private, and fast. Export for Unity, Godot, Phaser, and more.
PNG to Sprite Sheet
Pack multiple PNG images into an optimized sprite sheet. Upload your sprites, configure packing, and export for any game engine. Free browser tool.
Texture Packer Alternative
Free alternative to TexturePacker. Pack sprites into texture atlases in the browser. MaxRects, trim, extrusion, duplicate detection. No install, no license.
Stay Updated
Get notified about new features and tool updates.