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...
Thumbnails
You can drag and drop the images to change their order in the sprite.
      Options
      px
      Direction:
      File Type:
      Sprite
      Right click the image to save it to your computer. Open image in a new window   Copy Base64
      Usage
      You can use a RegExp object for capturing the file name.
      . { ... }
      Preview
      This is a preview of your sprite using HTML/CSS and your image.