CSS Sprite Generator
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...
- Select multiple image files from your computer
- Drag and drop files from your desktop onto the page
- Use a few sample images to try it out
You can drag and drop the images to change their order in the sprite.
Right click the image to save it to your computer.
Open image in a new window
Copy Base64
You can use a RegExp object for capturing the file name.
.
{ ... }
This is a preview of your sprite using HTML/CSS and your image.