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.

You may also like:
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.
via webresourcesdepot