CSS Sprite Generator

How to use it

1. Click Choose images and pick two or more files. Multiple selection is supported, and order follows the order you selected them.
2. Choose a Layout. Horizontal puts everything on one row, vertical stacks it in one column, and grid wraps into the number of columns you set.
3. Set Spacing if you want transparent padding between images, and Columns when the grid layout is active.
4. Click Build sprite. The sheet appears on the canvas, each image is listed with its size and offset, and the CSS panel fills with one rule per image.
5. Download the PNG, save it next to your stylesheet, and paste the CSS. Change the file name in the base class if you do not call it sprite.png.

Common use cases

• Icon sets - combine a dozen small icons into one request instead of a dozen requests.
• Game or UI tiles - lay out equal tiles in a grid and read the offsets straight from the output.
• Retrofitting an older project - generate a sheet from existing assets without installing a build plugin.
• Checking sizes before hand-writing CSS - let the tool compute offsets so you never count pixels by hand.

Why it stays private

Images are decoded and composited on a canvas inside your browser. Nothing is uploaded and the PNG is produced locally, so unreleased assets stay on your device.

FAQ

Q: Why is my sprite sheet transparent around the images? A: The canvas starts empty and only draws the images you loaded, so every untouched pixel stays transparent. Transparency in the source images is preserved.

Q: What class names does the CSS use? A: Each name comes from the file name, lowercased with non-alphanumeric characters turned into dashes, and prefixed with sprite-. Files that reduce to an empty name fall back to icon-1, icon-2 and so on.

Q: How large can the sheet be? A: It is limited by the canvas your browser will allocate. Very large sheets may fail to encode, in which case the tool reports the failure instead of handing you a broken file.