Sprite Sheet Generator
Pack multiple images into a single CSS sprite sheet. Choose layout, padding, and scale. Download PNG and auto-generated CSS.
Click or drop images here to add sprites
JPEG, PNG, WebP, GIF, SVG supported
Related Image Tools
What Is a CSS Sprite Sheet?
A CSS sprite sheet is a single image file that contains multiple smaller images packed together. Instead of loading many individual icons or images, a website loads one file and uses the CSSbackground-position property to show only the relevant portion. This reduces HTTP requests and can dramatically speed up page load times, especially for icon sets, game assets, and UI elements.
How to Use
- Click Add Images or drag files into the drop area to add your sprites
- Drag rows to reorder the sprites in the sheet
- Choose a layout: Horizontal, Vertical, or Grid (with configurable columns)
- Adjust padding between sprites and scale factor
- Click Download PNG to save the sprite sheet
- Click Copy CSS to copy the generated CSS with exact background positions
Features
- Three layout modes: Horizontal strip, Vertical strip, and Grid
- Configurable padding between sprites and global scale factor
- Auto-generated CSS with
background-positionfor every sprite - Transparent or solid background option
- Drag-to-reorder sprite list
- 100% browser-based — images never leave your device
FAQ
What image formats are supported?
JPEG, PNG, WebP, GIF, BMP, and SVG files are accepted. The output is always PNG to support transparency and lossless quality.
How should I use the generated CSS?
Add the base class (e.g. .sprite) to every element and the individual class (e.g. .sprite-icon-name) to set its size and position. The CSS uses exact pixel offsets based on the packed layout.
What does the Scale factor do?
Scale factor resizes all sprites proportionally before packing. Use 0.5× to halve the output size (good for Retina images) or 2× to double it. The generated CSS reflects the scaled dimensions and positions.