Drop several icons and get ready-to-use CSS classes with the width, height and background-position of each image in a vertical sprite layout.
Select several small images, such as icons, and this tool lays them out in a single vertical column with 10 px between each one. It then writes CSS for that layout: a base .sprite class that points to sprite.png, plus one class per image, named after the file, with its width, height and background-position offset.
The CSS appears in a read-only text box that you can copy into your stylesheet. Note that the tool currently outputs the CSS only; the combined sprite.png image itself is not offered for download, so you will need to build the matching image with the same order and spacing. Images are read in your browser and are not uploaded.
Not at the moment. The tool generates the CSS coordinates only; the stacked image is not exported.
Top to bottom in a single column, left-aligned, with 10 px of space after each image.
Each class is .sprite- followed by the file name without its extension, so rename files with spaces or symbols first.