FREE · IMAGE TOOLS
CSS Image Sprite Generator.
Pack images into a grid and export the combined PNG and matching CSS offsets.
How to use CSS Image Sprite Generator
Choose local files, adjust the settings and generate. Inspect the actual image dimensions and preview before downloading.
How it works
Pack images into a grid and export the combined PNG and matching CSS offsets. Up to 20 images and 50 MiB total. Cells use the largest image dimensions; sparse grids can exceed the output limit. Processing stays on your device; images are not sent to an editing service.
Example
Choose a local image or generate the sample artwork using the displayed settings.
Questions about CSS Image Sprite Generator
Is CSS Image Sprite Generator free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
JPG, PNG or WebP; 15 MiB input, 25 megapixels per image. Output maximum 16 megapixels and 8,000 px per side. Exporting removes source metadata; appearance depends on browser fonts and codecs. Up to 20 images and 50 MiB total. Cells use the largest image dimensions; sparse grids can exceed the output limit. Review image dimensions, transparency and quality before downloading.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.