Drag and drop your sprite sheet onto the canvas below. Make sure to specify the sprite width and height in the options box on the right, after double-clicking each sprite the CSS code will be generated, you can optionally add a name to your sprite, for example, if the sprite you selected is a twitter icon you could name that sprite "twitter-icon".
Sprite Options
CSS Code
About CSS Sprite Generator Tool
The purpose of this tool is to generate CSS sprites by specifying the width and height (in pixels) of each sprite, double-clicking the sprite will generate the CSS code for you to copy and paste into your projects, easy, fast, free, and simple.
Why use sprite sheets in CSS?
The purpose of sprite sheets in CSS is to combine multiple images (commonly icons) into one bigger image, this will increase your website speed and reduce latency because the browser doesn't need to request multiple images, instead your website only needs to request the one sprite sheet image, this will save server bandwidth, the less images your website needs to load the faster it will be.
This tool is useful if your sprite sheet contains many sprites, you can easily find the coordinates for each sprite in the sprite sheet, this tool will find the coordinates and generate, no need to do it yourself, save time and drag and drop your images onto the canvas above.
You can do everything you need to do with sprite sheets that you can do with normal images with CSS, only problem with sprite sheets you can't really make use of the HTML <img> tag for each sprite, most browsers do not support spriting with the <img> tag, in the future this will be supported.
If you need to create a sprite sheet from multiple sprites (images) you can do so by using the Images to Sprite Sheet Generator tool.