CSS Sprites Generator
developer
Combine multiple images into a single sprite sheet and generate CSS code automatically.
Upload Files
📁
Drop images here or click to upload
Supports multiple files
1. How to Use
- Drop images here or click to upload. Add or remove images with the × button.
- Set Padding (px), Max Columns, and Background color. Click Generate Sprite.
- Download the sprite image as sprite.png and copy the generated CSS from the Preview or CSS Code section.
- Use Reset to clear everything and start over.
2. How It Works
Uses Canvas API to composite images into a single PNG. Images are laid out in a grid.
Generated CSS: .sprite for the common background, .sprite-{filename} for each image with width, height, and background-position.
Apply .sprite as base and add .sprite-{name} for each icon. Use background-position for display.
3. About
Free online CSS sprites generator. Combine multiple images into one sprite sheet. Customizable padding, columns, and background. Automatic CSS class generation.
4. Advantages
- Reduces HTTP requests by combining images.
- Customizable padding, max columns, and background color.
- Automatic CSS with .sprite and .sprite-{name} classes.
- Download PNG and copy code in one place.
5. Use Cases
- Icons: Combine icon images for faster loading.
- UI: Create sprite sheets for buttons and UI elements.
- Performance: Reduce image requests on web pages.