Css Sprite Generator

Combines multiple uploaded images (PNG, JPEG, or SVG) into a single PNG sprite sheet rendered on a canvas, and emits matching CSS background-position rules. Three layouts are offered: horizontal, vertical, and packed (row-wrap). Optional pixel padding can be inserted between sprites.

1. Click the upload dropzone or drag image files onto it. PNG, JPEG, and SVG are accepted; non-image files are filtered out. 2. Pick a Layout (Horizontal, Vertical, Packed) and optional Padding in pixels (0-100). 3. Click Generate. A sprite preview appears on a checkerboard background. 4. Click Download to save sprite.png, and use Copy CSS to copy the generated CSS rules.

Horizontal places images left-to-right in a single row whose height equals the tallest image. Vertical stacks them top-to-bottom in a column whose width equals the widest image. Packed wraps into rows based on a width derived from ceil(sqrt(count)) times the widest image. The generated CSS emits one '.icon-<name>' class per image, with width, height, a 'background: url(sprite.png) no-repeat' declaration, and a negative background-position. Filenames are stripped of their extension and sanitized to [a-zA-Z0-9_-].