Image Tools
Private & secure
CSS Sprite Generator
Combine several images into one sprite sheet and get the CSS for it.
Merge small images such as icons into a single PNG and get a CSS class for each one, ready to drop into your project.
Features
Three Layouts
Arrange images vertically, horizontally, or in a grid.
Generated CSS
One class per image, with exact size and position.
ZIP Download
Get the sprite and the stylesheet together.
Use Cases: When This Tool Helps
-
Speed up icon-heavy websites
Combine dozens of small icons into one image to cut HTTP requests.
-
Build game sprite sheets
Pack animation frames or tiles into one sheet for HTML5 and canvas games.
-
Optimize email templates
Use one combined image for social icons in newsletters and signatures.
-
Maintain legacy websites
Generate sprite CSS for older sites and browsers that rely on sprite sheets.
-
Organize UI icon sets
Keep a project's flags, badges, or rating stars in one tidy file.
-
Learn front-end performance
Students can see how sprites and background-position work in practice.
How to Use
- Add your images.
- Choose a layout, spacing, and class prefix.
- Download the ZIP and link the CSS.
FAQ
How are classes named?▾
From each file name plus your prefix, such as sprite-home.
Are my images uploaded?▾
No. The sprite is built in your browser.
More Image Tools
Image Compressor
Shrink JPG, PNG, and WebP files by quality or to a target size
Image Converter
Convert images to JPG, PNG, WebP, BMP, or ICO in batches
Image Cropper
Crop images freely, to a ratio like 1:1 or 16:9, or to exact pixels
Image Resizer
Resize by pixels or percentage, with passport, visa, lottery, and social media sizes
Rotate and Flip Image
Rotate by 90° or any angle and mirror images horizontally or vertically
Favicon Generator
Create favicon.ico and app icons from any image
Online Image Editor
Adjust colors, add filters and text to photos