CSS Sprite Generator

Combine multiple uploaded images into a single PNG sprite sheet and generate the matching background-position CSS. Three layouts are supported (horizontal, vertical, and grid), with optional padding between tiles and a configurable column count for grid layout. All compositing happens on a canvas in your browser; no images are uploaded anywhere.

1. Click the upload area or drag image files onto it to add them (multiple files supported). 2. Pick a layout (horizontal, vertical, grid) and, for grid, set the column count. 3. Optionally set padding in pixels between tiles. 4. Click Generate Sprite to rebuild the sheet, then Download Sprite for the PNG and Copy CSS for the .icon-* rules.

horizontal stacks images left-to-right using the tallest image as row height. vertical stacks top-to-bottom using the widest image as column width. grid packs images into a column-major grid where each column and row is sized to its largest member. The generated CSS uses class names derived from the file name (extension stripped, non-alphanumeric characters replaced with -), e.g. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. The output PNG is exported via canvas.toDataURL and is always PNG regardless of input format.