Generate, Create CSS Sprite Single Image & CSS Code Online

A simple way to explain CSS sprites would be to have 1 single image containing all the design icons, images , logo, buttons, hover effect buttons etc instead of having them individually load up on your site. This is useful if you have huge numbers of buttons and icons served on your web pages.

The more images the more http requests are made to load those images one by one. So instead of putting so many requests for a single small sized images, we can make just one http request for a medium sized image contain all your required icons, buttons etc images and display them as portions of the original image. See example above of Google reader icons.
Working Principle : Images are combined into one larger image at defined X and Y co-ordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

Create CSS Single Sprite Image from Multiple Icons, Buttons, Logo, Design Images etc

Here are 2 online css sprite generators which allows you to automate the process of generating CSS sprites. Simply upload 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.

# CSS Sprites Generators:  (Link1) and (Link2)

You can find more info about css sprites and why to use it here.
A solid example of CSS Sprite usage in the Google search result page where the all icons buttons etc are combined to this css sprite image.