CSS Sprite Generator
Combine images into a sprite sheet with auto-generated CSS.
CSS Sprite Generator packs multiple images into one sprite sheet and writes the matching CSS — "Combine multiple images into a CSS sprite sheet with code." Drop several files (filenames become CSS class suffixes), set "Gap (px)" (0–20) and "Layout" (Horizontal, Vertical, or Auto (Grid)), then click "Generate Sprite". The result shows a "Sprite Size" stat, the sheet preview, and a "Generated CSS" panel with "Copy" / "Copied".
Each image gets a `.sprite-{basename}` rule with its background-position offset, plus a shared `.sprite` rule pointing at url('sprite.png'). "Download Sprite" saves sprite.png and "Download CSS" saves sprite.css; the preview's clear icon starts over. Packing and CSS generation are pure local canvas and string work — no network, no AI.
How it works
lib/imageCssSprite.ts (validated by zod cssSpriteSchema: gap int 0–20 default 0; layout horizontal|grid|auto default auto) computes the cell as max natural width/height plus gap, then draws each image at its col/row origin. Horizontal packs all images in one row; Vertical stacks one column; Auto (Grid) computes cols = ceil(sqrt(n*1.5)) for a balanced grid.
CSS lines are emitted per image: `.sprite-{basename} { background-position: -{x}px -{y}px; width; height }`, plus a shared `.sprite` rule with `background-image: url('sprite.png')`. Export is PNG via toBlob. State lives in Redux cssSpriteSlice (items, result, isProcessing). No third-party libs — fully local canvas packing and string generation.
How to use
- Drop multiple images (accept image/*, multiple) — filenames become CSS class suffixes like sprite-{name}.
- Set "Gap (px)" (0–20 slider) and "Layout" (Horizontal / Vertical / Auto (Grid)).
- Click "Generate Sprite" (button reads "Generating..."; toast "Sprite generated!").
- Read the "Sprite Size" stat and inspect the sheet preview.
- Review the "Generated CSS" panel; click "Copy" to grab the rules (toast "CSS copied to clipboard!").
- Click "Download Sprite" (sprite.png) and "Download CSS" (sprite.css).
- Use the preview's clear icon-button to start over.
Tips
- Image basenames (extension stripped) become class names — rename files to valid CSS identifiers before upload; spaces and special chars aren't sanitized.
- Gap adds padding between cells; the generated CSS positions assume gap-inclusive coordinates.
- Generated CSS hardcodes url('sprite.png') — keep the PNG filename when hosting, or edit the copied text.
- Horizontal packs all images in one row (wide sheet); Auto (Grid) approximates a wider grid (sqrt(n*1.5) columns).
CSS Sprite Generator FAQ
What CSS classes are generated?
One `.sprite-{basename}` per image, plus a shared `.sprite { background-image: url('sprite.png'); … }` rule.
Does the sheet upload anywhere?
No — canvas packing and CSS text stay local; downloads are client-side. No network, no AI.
Why is my class name weird?
Classes derive from file basenames — spaces and special characters aren't sanitized, so rename files first.
Which layout should I pick?
Horizontal for icon rows, Auto (Grid) for large sets, Vertical for stacked strips; Gap controls spacing between cells.
Can I customize the CSS image URL?
Not in the UI — edit the copied text to match your asset path (it hardcodes sprite.png).
Credits
- Canvas 2D API — Sprite sheet packing and PNG export