Welcome to CSS Sprite Generator, the fastest way for you to make CSS sprites. All the work will be done in your browser, so don't worry about sending your images over the Internet. The general reason for creating sprites is to make your webpages load quicker, instead of loading say 10 seperate images, with a sprite you only load one image. Once you are ready, follow the instructions below to get started.
With thanks to Brian Grinstead for the code to this generator.

Note: This generator only works with the latest browsers!

Loading, please wait...
You can drag and drop the images to change their order in the sprite.
      File Type:
      Right click the image to save it to your computer. Open image in a new window   Copy Base64
      You can use a RegExp object for capturing the file name.
      . { ... }
      This is a preview of your sprite using HTML/CSS and your image.