CSS Sprite Generator: Project Fondue

A good generator with plenty of options. You upload a .ZIP of all the images that you’d like turned into a sprite and it takes care of the rest. It spits out an image and all of the various “background-position” values that you need.


CSS Sprites generator

Ugly and buggy, this sprite generator forces you to upload every image individually. Try it out to see what you think but honestly, there are better alternatives on this list.


CSS Sprites – Online CSS Sprite Builder / Generator

This one is pretty nice. You can easily upload a bunch of images at once, choose your output filetype and even choose to get either Sass and CSS code as a result. There are also some neat options for automatically generating hover effects like desaturated and flipped. Overall quite impressive, be sure to check it out.


Spritebox – Create CSS from Sprite Images

This one takes a different, slightly less automated route. Instead of creating a sprite image for you, it allows you to upload your already created sprite and define specific areas to generate the resulting CSS. A great tool if you prefer to build sprites in Photoshop and just want help with the code.


Canvas: CSS Sprites Generator

If you’re uploading images for this one, you have to do it one at a time, which is a bit of a pain. If you have links though you can simply paste in a list with corresponding class names and you’re good to go. Options include padding and background colors. It worked well in my testing, definitely worth a look.


Stitches – An HTML5 sprite sheet generator

This one allows you to drag in images, which is awesome after using all of the awkward unloaders that other developers have come up with. After that you can simply click on one button to get the image and another to grab the CSS. There are virtually no options and it only works in Chrome and Firefox, but it’s perfect if you just want a quick and simple solution.



This one is for super nerds only, it’s a downloadable sprite generator that you run from the command line. The implementation is really slick though, you simply point it at your existing CSS file and it does the rest of the work. This makes the problem of long-term sprite management a cinch as you can just hang on to your original css and image files and re-process them when there’s a change.



SpriteMe is an awesome tool that allows you to completely keep your typical development process in tact. Just build your page like you normally would using individual images. Then, once you’re finished, open the page in a browser and hit the SpriteMe bookmarklet. This grabs all the images on the page, creates a sprite and generates the CSS. This is especially useful if you’re converting an exiting site.



Spritefy is another option that lets you simply drag a bunch of files into the browser to process them. As with Stitches, there really aren’t any options but it’s definitely a super fast way to get up and running with sprites (Chrome and Firefox only).


CSS Sprite Generator

This one has a few unnecessary steps in the generation and setup process, so it takes a few seconds longer than most of the other alternatives, but it has a ton of code output including both CSS and HTML along with various snippets for adding each image to a div or span, inserting links, etc.


SpriteMeister – Automatic CSS Sprite Generator

SpriteMeister is a lot like SpriteMe above, only less automated. Instead of using a bookmarklet, you manually upload each image and your current CSS file and then receive a download with updated code and a single image.


Sprite Creator 2.0

This one works just like Spritebox above. You upload the sprite image that you created elsewhere and use a simple selection process to automatically generate the appropriate CSS for each image.


Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

12 Free CSS Sprite Generators: http://goo.gl/NhLNR

For more related resources: