in ,

20 Best CSS Sprite Generator and CSS Image Sprites Tutorials

Do you really understand CSS Sprite? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates.

Having assigned this generated image or sprite generator to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term “sprites” comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.

CSS Sprite Generator

CSS Sprites Generator v.0.0.2-alfa

This tool allows you to upload multiple files and generate a sprite out of them. It also gives you the CSS code (the background-position value) for each image in the sprite.


The custom sprite upload feature will help you to find what are the css coordinates for a pre-made image sprite. Simply upload from a file or an URL and select revelant areas, choose a CSS class name or let the tool generate one for you then finish by clicking “Snap!” button to save the corresponding CSS in the CSS code box below.

Canvas CSS Sprites

This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas. This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas.


Simply upload your navigation sprite below, add some guides, name some stuff and hey presto! Nav-o-Matic will generate all the code you’ll need to get your navigation working in a jiffy!

Css Sprites

Upload your image, add more than one image and create your sprite, You could also set your output type as PNG, JPEG or GIF.


Spritebox is WYSIWYG tool to help web designers quickly and easily create CSS classes and ID’s from a single sprite image.

CSS Sprite Generator

Just upload your source file, and create the sprite image and CSS by ignoring the duplicates, resizing the source images, setting the sprite and CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.


CSS Sprite Generator

A Drupal module for building CSS sprites. Placeholder for what will be a CSS Sprite Generator specific to Drupal. Feel free to post feature requests on what you would like to see for the future of this module.


A Java-based desktop application that parses special directives that you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

CSS3 Generator v1.6

This CSS3 generator lets you generate cross-browser compatible CSS for things like rounded corners, box shadows, and @font-face. Just pick something from the drop-down menu and it shows you the appropriate generator.

CSS Sprites Tutorials

David Walsh Blog

e-House Studio: CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

Web Site Tips: CSS Sprites Tips

Since each of the above CSS classes use the same icon graphic, we can use a combined CSS rule to add the background graphic for all of them.

WebSite Optimization: CSS Sprites

Yahoo uses CSS sprites on its home page to improve performance. The first set of icons is displayed in the “Check your mail status” section on the right of!

 Line25: How to Create a CSS Menu Using Image Sprites

Coding Apple’s Navigation Bar Using CSS Sprites


Written by lava360

Blogger who is Passionate about blogging to share world of design and freebies to viewers, designers, photographgers, graphic and web designers.



25 Stunning Before and After Photo Retouching Portraits

The other side of me, Conceptional Fashion Photography