Add your icons or images and get one optimized sprite sheet plus the CSS classes that show each image with background-position. Choose packed, horizontal, vertical or grid layout, padding and retina scale; everything runs in your browser.
Last updated:
Add images or drop them herePNG, JPG, GIF, WebP, SVG · up to 300 images
Images 0
Sprite sheet
Hover or tap an image on the sheet to see its class.
CSS
Advertisement
Advertisement
How to use the CSS Sprite Generator
Add images: choose or drop your icons (PNG, JPG, GIF, WebP or SVG). Sample icons are loaded so you can try it right away.
Pick a layout (Packed gives the smallest sheet) and set the padding between images.
Set the class prefix and the sprite file name used in the CSS url().
Enable Retina @2x if your images are double size, so the CSS shows them at half size and sharp on high-density screens.
Download the sprite PNG and CSS, or the ZIP that also includes a demo page.
How to use the sprite CSS
Upload the PNG next to your stylesheet (or change the file name to its real path), paste the CSS, and add both classes to an empty inline element:
<span class="icon icon-home" role="img" aria-label="Home"></span>
/* change the image on hover */
.button:hover .icon-star { background-position: -52px -2px; }
Every image keeps its own width and height, and background-position moves the sheet so only that image shows through. The values are negative because the sheet is shifted up and to the left.
Choosing the right options
Option
When to use it
Packed
Mixed image sizes; produces the smallest sheet with a binary-tree packing algorithm.
Horizontal / vertical
Animation frames (step through them with steps()) or same-size icons that should stay in order.
Grid
Icon sets and flags of similar size; every image sits centered in an equal cell.
Padding 2-4px
Prevents neighbouring images from bleeding in when the page is zoomed or scaled.
Retina @2x
Your source images are double resolution; CSS shows them at half size with background-size.
Tip: compress the downloaded PNG with a PNG optimizer before publishing; sprite sheets with large transparent areas often shrink by 30-70%.
Frequently asked questions
What is a CSS sprite?
A CSS sprite is a single image that contains many small images such as icons. Each element shows the same file as its background, and background-position shifts it so only the right part is visible. It reduces the number of image requests and avoids flicker when hover images load.
Are CSS sprites still useful with HTTP/2?
HTTP/2 makes many small requests cheaper, so sprites matter less than they used to. They are still handy for game graphics, emoji or flag sets, hover states that must appear instantly, and email or legacy environments. For simple single-color icons, SVG icons are often a better choice.
Why add padding between images?
When a sprite is scaled, zoomed or rendered at fractional pixel positions, the browser may sample pixels from the neighbouring image, showing thin lines at the edges. A few pixels of transparent padding prevents this bleeding.
How does background-position work in a sprite?
The position is negative: to show an icon that sits 64px from the left and 32px from the top of the sheet, use background-position: -64px -32px with the element sized to the icon's width and height.
What does the Retina @2x option do?
It assumes your source images are twice the size they should appear. The sheet keeps full resolution, while the CSS halves every width, height and position and sets background-size to half the sheet size, so icons look sharp on high-density screens.
Which layout should I choose?
Packed creates the most compact sheet for mixed sizes. Horizontal or vertical strips are easy to read and work well for icons of equal size or animation frames. Grid places equal cells in rows and columns, which suits icon sets.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.