CSS Sprite Generator
Combine multiple images into a single CSS sprite sheet. Upload your images, generate background-position CSS rules automatically, and download the sprite PNG — all in your browser, no upload.
About the CSS Sprite Generator
This CSS sprite generator runs entirely in your browser. Upload multiple images, choose layout and padding options, then click Generate sprite to combine them into a single sprite sheet. The tool produces background-position CSS rules and lets you download the sprite PNG. Nothing is uploaded — all processing happens locally with JavaScript and the Canvas API.
How to use
- Click the file input and select multiple images (PNG, JPG, GIF, or SVG).
- Choose a layout (horizontal or vertical) and optionally add padding between images.
- Set a CSS class prefix if desired (default is
sprite). - Click Generate sprite to combine images and produce CSS rules.
- Click Download PNG to save the sprite sheet, or Copy CSS to copy the rules.
What is a CSS sprite?
A CSS sprite is a single image file that contains multiple smaller images combined together. By using CSS background-position to show only a portion of the sprite, you can reduce the number of HTTP requests your page makes, improving load performance. This technique is widely used for icons, buttons, and other UI elements.
Frequently asked questions
What image formats are supported? PNG, JPEG, GIF, and SVG. The sprite is output as PNG to preserve transparency.
How are CSS class names generated? Each class is based on the image filename (without extension), prefixed with your chosen prefix. For example, icon-home.png with prefix sprite becomes .sprite-icon-home.
Are my images uploaded anywhere? No. Everything happens locally in your browser. No images leave your device.