UX Design and Development course

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them


You've heard of them, but...

Do you really understand them? 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?


Here is an example of that on CSS-Tricks.

Keep reading ...

Spritpad - online sprite making tool

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

Use Spritpad