CSS Sprites Generator

CSS sprites are great. They can help reduce the load time of your page by decreasing the number of HTTP requests made.

To create CSS sprites, all you need to do is place all of your smaller images into one big image. Then using CSS, adjust the image positioning using the background-position property to display the part of the image you require.

Tim Chien has created a useful graphics tool which can generate the larger image for your CSS sprites automatically. You simply supply a list of images, select a appropriate padding and then drag the smaller images around until you are happy. Once you are done, the generator supplies both the large image and all the background positions you need to get your smaller images.

Generate those sprites!

Generate those sprites!

Although this application works in Opera, Safari and Chrome; it can only save in Firefox or Internet Explorer.

Check out the CSS Sprites Generator


Applications, Graphics
Tim Chien
Posted on:
July 13th, 2009
Posted by:
Andi Smith



Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find CSS Sprites Generator works in other browsers by leaving a comment below.



Hi, this is Tim Chien, who made the script.

The name “Kelsey Shay” was credited for the CC-licensed Flickr photo, not for the script. Please correct the name appeared here and sorry for the unfortunate confusion.

I’ve made the same adjustment on the webpage.


Posted on December 22, 2009

Andi Smith

Sorry about this Tim! This has now been updated!

Weldone on making such a great tool!

Posted on December 23, 2009

Add comment

(will not be published)