CSS Sprite Generator
Combine PNG/JPG/WebP/SVG into a CSS sprite sheet with vertical/horizontal/grid packing, 2x retina, drag-to-reorder. Free, offline, client-side.
Combine PNG / JPG / WebP / SVG / AVIF into a CSS sprite with 3 packing modes (vertical, horizontal, grid), 2x retina output, drag-to-reorder, and optimized CSS (shared base rule plus per-icon position).
Drag and drop images here, or click to browse
PNG, JPG, WebP, SVG, AVIF
How to Use CSS Sprite Generator
- Drop multiple image files (PNG / JPG / WebP / SVG / AVIF) or click to browse.
- Drag the handle on any row to reorder. Order in the queue equals order in the sprite.
- Pick a packing mode: vertical (icons stack), horizontal (one row), or grid (specify columns per row).
- Set padding between icons (prevents color bleed at scaled sizes) and the CSS class prefix.
- Toggle 2x retina to also emit a 2x PNG and a
@media (min-resolution: 2dppx)rule. - Hit Generate Sprite and the preview canvas plus CSS appear.
- Download
sprite.png(and the 2x version if enabled). Copy the CSS, which uses a shared base rule plus per-icon position to save bytes.
Frequently Asked Questions
Why use a shared base rule instead of per-icon shorthand?
A naive sprite tool emits a full background: url('sprite.png') no-repeat ... for EACH icon, duplicating the url() N times. Optimized output uses one shared .sprite { background-image: url('sprite.png'); } plus per-icon .sprite-x { width; height; background-position; }. For 20 icons that saves hundreds of bytes of duplicate URL.
What packing mode should I pick?
Vertical: best for icon lists where icons vary in width but you want minimal sprite width. Horizontal: best for short animation frames or carousel-style use. Grid: best for square icon sets where you have many (for example 64 icons in an 8 by 8 grid). Smaller sprites decode faster.
Are sprites still worth it in 2026?
Less critical than 10 years ago. HTTP/2 multiplexes requests, so 50 small PNGs no longer means 50 round trips. But sprites still help with guaranteed atomic loading (all icons appear together), reduced file overhead (PNG headers cost bytes per file), and cache simplicity. SVG sprites with <use> are increasingly preferred for vector icons, but raster sprites remain useful for screenshots, pixel art, and PNG-only assets.
How does 2x retina work?
The tool generates two sprites: sprite.png at exact pixel dimensions and [email protected] at 2x scale. The CSS includes a @media (min-resolution: 2dppx) rule that swaps to the 2x sprite and adds background-size equal to the 1x dimensions, so the 2x pixels render at the SAME logical size as 1x but crisper. The CSS class does not change.
What about SVG?
SVG files are supported as input and are rasterized to PNG at their declared dimensions. For native SVG sprite sheets (vector, scalable, smaller bytes), use <symbol id="icon">...</symbol> inside an SVG file and reference it with <use href="sprite.svg#icon"/>, a different technique outside this tool’s scope.
Why disambiguate class names?
If you upload icon.png twice (or files that sanitize to the same name), the second occurrence gets suffixed with -2, -3, and so on. This prevents collisions where two icons would share the same CSS class and only the last position would apply.
Are there canvas size limits?
Yes. Most browsers cap canvas at 32,767 by 32,767 logical pixels and 16,384 by 16,384 actual pixels (Safari is stricter at 4,096 by 4,096 on iOS). The tool warns when sprite dimensions exceed 4,096px. If you hit this with many large icons, switch to grid mode with more columns to reduce height.
Does this preserve PNG transparency?
Yes. Output is PNG with a full alpha channel. The Canvas API’s toBlob('image/png') writes 32-bit PNG with transparent backgrounds preserved exactly as in the source images.
Is my data secure?
Yes. Images are loaded into your browser via the FileReader, Image, and Canvas pipeline. No upload, and no analytics on what you sprited.