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.

  1. Reply Ahmad Alfy March 13, 2012 at 4:13 AM

    I must say that this tool confused me a little at the beginning as I saw it over a different blog post and there was nothing mentioned about “drag ‘n drop”.

    I took sometime to find how to add the image! It’s quite good but there’s minor thing need to be fixed that when you add an image to the top left where the coordinates are 0px 0px it shows up as -0px -0px. There’s nothing called minus zero; right?

    Otherwise it’s working good and I think it will offer packages to save and edit your sprites in the future. It will be great if it’s kept free the way it’s now.

  2. Reply Christian Becker March 13, 2012 at 4:06 PM

    Hallo Ahmad,

    you’re absolutely right, we didn’t thought that all blogs would only share the app link (instead of the promopage link). However we’re currently working on that and will integrate a short guided tour to introduce people to SpritePad.

    If you register a free account, you’re able to load and save your spritemaps as open and editable versions in the cloud. And of course SpritePad is and always will be free!

  3. Reply Muhammed Jenos March 19, 2012 at 4:52 PM

    Tried the tool today and i find it easy to use and buggy as well. First it never let me download the sprite in chrome as the button just doesnt do anything. Then i try to register in another window and tried to login but then it kept giving me a Token error. Had to let go off that sprite in chrome altogether and started fresh in fireworks. Sometimes it creates the y cordinates of the image as 250.73458992384 px.

    Suggestion :
    Make some sort of snap to pixels possible to stay within the pixel value cordinates. 250px is better than 250.45645534345 px. If auto-alignment is only for premium users, you could atleast implement to give us a colored border around the images which are in the canvas, to help us align the rest of the images.

    Also how about a slign grayish transparent background which helps to see all white png images?

    Otherwise, a nice tool and bookmarked.

Leave a reply