How it works
The CSS Sprite Generator combines multiple individual images into a single sprite sheet PNG and generates the corresponding CSS classes for each sprite. Sprite sheets reduce HTTP requests — instead of loading 20 icon images separately, you load one combined file and use CSS background-position to display each icon.
CSS sprites were the dominant performance technique for icons and UI images before HTTP/2 and SVG icon fonts became standard. They remain relevant in environments where HTTP/1.1 is still used (shared hosting, legacy infrastructure) and for cases where you have many small raster images that can't be converted to SVG (photographs, pixel art).
How to use it: upload 2 or more images. The tool arranges them into a sprite sheet (horizontal row, vertical column, or grid). The combined PNG is shown with a ruler grid. A CSS class for each image is generated with the correct background-position, width, and height values. Copy the CSS and download the PNG.
Sprite layout options: horizontal (one row, easier to read for small icon sets), vertical (one column), or auto-grid (the tool calculates optimal grid dimensions to minimize total canvas area).
CSS output format: each sprite gets a class like .sprite-icon-name { background-image: url('sprites.png'); background-position: -64px -0px; width: 32px; height: 32px; } — copy-paste ready.
Retina support: enable 2x mode to generate a sprite sheet at double resolution with CSS media queries that serve the 2x version on retina displays.
Privacy: all sprite packing runs in the Canvas API. No images are uploaded.
Frequently Asked Questions
- CSS sprites make sense when: you have many small raster images (not convertable to SVG), your deployment serves HTTP/1.1 (which doesn't multiplex requests), your mobile users are on slow connections where each HTTP request has significant overhead, and the images aren't cached separately. For most modern web apps on HTTP/2, individual files and browser-native caching are fine.
- Each image gets a CSS class with background-image pointing to the sprite sheet URL, background-position with the negative X/Y offset, width, and height. Example: .sprite-icon-check { background-image: url('sprite.png'); background-position: -64px -0px; width: 32px; height: 32px; }
- Add a <div> or <span> with the generated class name. The CSS sets the element's size to the sprite's dimensions and uses background-position to show the correct frame from the combined sheet. Example: <div class='sprite-icon-check'></div>
- The layout (horizontal, vertical, or grid) affects CSS maintainability but not performance — the browser downloads one image regardless of layout. Grid packing minimizes the total PNG area (better compression), but the difference is small for most icon sets.