CalConverters

CSS Sprite Generator

Upload images, combine them into a single sprite sheet, and generate the CSS code — all in your browser.

CSS Sprite Generator

Combine images into one sprite sheet and generate CSS — all in your browser.

1
Upload
Add source images

Drop images into the box below. Everything runs in your browser.

Drop images here

PNGJPGWEBPGIFSVG

Max 5MB each · up to 100 images

Browse Files
Sprite preview
Updates with every change
pack · 4px
Add images to see the preview.

What Are CSS Sprites?

CSS sprites are a technique to reduce the number of HTTP requests for image resources. Multiple small images — like icons, buttons, and logos — are combined into a single larger image called a sprite sheet. Using CSS background-position, each individual image is displayed by shifting the visible area to the correct coordinates.

This technique is particularly effective when a page uses many small images. Major websites like Yahoo!, Google, and Amazon have used CSS sprites to optimize their page load times.

How to Use This Tool

  1. Upload images — Drag and drop multiple image files onto the upload area, or click "Browse Files" to select them. Supported formats: PNG, JPG, GIF, WebP, SVG.

  2. Choose layout — Select from four layout algorithms:

    • Packed: Bin-packing for the smallest possible sprite (recommended for mixed sizes)
    • Horizontal: Single row arrangement
    • Vertical: Single column arrangement
    • Grid: Uniform grid cells (best for same-sized icons)

  3. Adjust settings — Set padding between images, choose output format (PNG or WebP), configure CSS class prefix/suffix, and enable retina @2x/@3x generation.

  4. Preview and download — The right panel shows a live preview with the generated CSS, SCSS, and HTML code. Download everything as a ZIP file.

Retina / HiDPI Support

Modern displays have pixel ratios of 2x or 3x. To keep your sprites crisp on these screens, enable the @2x and @3x options. The tool will:

  • Generate additional sprite sheets at higher resolutions
  • Output CSS @media queries that detect the device pixel ratio
  • Use background-size to scale the higher-resolution sprite down to the correct display size

Browser Compatibility Notes

  • Opera: Versions up to 9.0 have a 2042px limit on background-position values. For very large sprites, consider using the packed or grid layout to minimize dimensions.
  • Safari: Repeating background images may cause issues. Ensure adequate padding between images.

Performance Benefits

Each HTTP request has overhead — DNS lookup, connection, TLS handshake. By combining 20 icon files into a single sprite, you eliminate 19 requests. This matters especially on mobile networks where latency is high.

Frequently asked questions

What are CSS sprites?
CSS sprites combine multiple images into one larger image (sprite sheet). Each image is displayed using CSS background-position, reducing HTTP requests and improving page load speed.
How does the retina @2x/@3x option work?
When enabled, the tool generates additional sprite sheets at 2x and 3x resolution, along with CSS media queries that automatically serve the right resolution based on the user's device pixel ratio.
Is my data safe?
Yes. All processing happens entirely in your browser using the Canvas API. No images are uploaded to any server.
What image formats are supported?
You can upload PNG, JPG, GIF, WebP, and SVG files. SVG images are rasterized via canvas. Output is available in PNG or WebP format.
What is the packed layout?
Packed layout uses a bin-packing algorithm (MaxRects) to arrange images as efficiently as possible, minimizing the total sprite dimensions and file size.
How does deduplication work?
The tool hashes each uploaded image and detects pixel-identical duplicates. When found, only one copy is placed in the sprite and all matching class names are merged in the CSS, reducing file size.
Can I reorder the images in the sprite?
Yes. Drag any image in the list using the handle on the left to reorder it. The sprite preview, CSS code, and download regenerate automatically as you reorder.