Instant Sprite Instant Sprite / tool / free

The fastest way to make a sprite sheet for CSS.
5 favorites
submitted over 5 years ago, by lush
Instant Sprite popular tool



That does indeed appear to be quite instant. Hah.

pineapple, over 5 years ago


I'm the author of this app. Basically, I got tired of uploading a bunch of images to sprite generators, then downloading the result, finding it on my hard drive, moving it into the project. So here you can drag/drop your source images, apply some basic settings, then drag it out of the page and into your project and get ready to use CSS. Let me know if you have any feedback!

bgrins, over 5 years ago


Hey there, funny you showed up :) I just used your tool when I converted all my images to sprites:

I have an OSX tool that I paid for, and it pales in comparison. Tons of steps to do something simple, it outputs span instead of div making things difficult when I want it to be block level, but display:none to start with. the css was very redundant.

So yeah -- Just wanted to say your interface isn't the prettiest but functionality wise it outperformed all the tools I've tried, so excellent work. The one thing I wish it did was re-order the images to make the smallest image dimensions as possible to save space, but that wasnt particularly a big deal, it was only a few kb comparison between my osx tool which packs it, and your tool.

pineapple, over 5 years ago


Yeah I've experimented with reorganizing the images to save space, but I never quite got it working. The UI could definitely use an update - if I were to focus more time on the project that is where I would like to start. Do you think it just needs some visual improvements, or are there also some UX changes that you'd like to see? I'd love some feedback or help in improving it! By the way, all the code is open sourced here:,

bgrins, over 5 years ago


The UX is perfect as is. Just maybe throw a bg on there and a google font and it will look better. Here's a vim page I designed which is similarly as simple, but with the kind of (easy) changes I'm talking about:

pineapple, over 5 years ago


Printing these out for the wall! FTW

SkinnyGeek1010, over 5 years ago


20170512 junda

xiaojun, about 1 year ago


wanglili, 9 months ago

Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.