Sprite Sheet Generator
Combine several images into one sprite sheet with padding, and generate the background-position CSS or the CSS custom properties for each sprite.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Sprite sheets solved a problem that mostly went away
Combining many small images into one file was essential under HTTP/1.1, where browsers opened a limited number of connections per host and each request carried substantial overhead. HTTP/2 and HTTP/3 multiplex requests over one connection, which removes most of that cost, and for icons an inline SVG or an icon font is usually better than either approach. Sprites remain genuinely useful for game and animation frames, for images that must load as a single unit, and where the assets are photographic rather than vector.
Packing wastes space unless the sizes match
A simple grid layout sizes every cell to the largest sprite, so one large image among many small ones wastes most of the sheet. Row packing, where each row is only as tall as its tallest member, recovers much of that. Getting closer to optimal requires a proper rectangle packing algorithm, and the gain over row packing is usually small unless the sizes vary enormously.
Padding prevents bleeding
When a sprite is scaled or displayed on a high density screen, the sampling can reach slightly outside its intended bounds and pick up neighbouring pixels, showing as a thin line of the wrong colour along an edge. A gap of one or two pixels between sprites prevents it. For sprites scaled significantly, extending the edge pixels into the gap works better than transparency, since the sampler then finds more of the same colour instead of nothing.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
Are sprite sheets still worth using?
For game and animation frames, yes. For icons on a modern site, usually not: HTTP/2 removed most of the per-request cost, and inline SVG is more flexible, scales properly and can be styled with CSS.
How much padding should I add?
One or two pixels is enough to stop neighbouring sprites bleeding in when the image is scaled or shown on a high density display. Sprites that are scaled significantly benefit from extending their edge pixels into that gap rather than leaving it transparent.
Why is my sprite sheet so large?
Usually because a grid layout sizes every cell to the largest sprite, so one big image among many small ones wastes most of the sheet. Row packing, where each row is only as tall as its tallest member, recovers most of that.
Should the sheet be PNG or WebP?
WebP is typically 25 to 35 percent smaller at the same quality and supports transparency, so it is the better default. PNG remains useful when the sprites are flat graphics with few colours, where lossless compression is already efficient.
How do I use the generated CSS?
Set the element to the sprite dimensions and use the background-position for that sprite. The custom property version is easier to maintain, since each sprite becomes one variable rather than a separate rule.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Upload several images to pack them into one sheet with the CSS to use them.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.