A Complete Web-Based CSS Sprites Generator: SpritePad

CSS sprites are great for minimizing the number of requests our websites perform by collecting multiple images in a single one and displaying the appropriate ones using background-position.

However, once the images are placed on a canvas, finding the positions of each item is a time-consuming process.

SpritePad is an impressive web application (which is free) that simplifies the whole process by allowing us to drag 'n' drop any number of images to a canvas, position them how we want and get the auto-generated CSS rules.


The canvas size can be customized and/or can be shrinked to fit the document with a click.

Once we arranged all the items, SpritePad provides us a .zip file which consists of the sprite image + CSS rules.

P.S. There is also a "premium" plan which makes sharing the sprites with colleagues possible and has more features.