CSS Sprite Generator

Combine multiple images into a single sprite sheet and automatically generate the matching CSS background-position code. Supports horizontal, vertical, and grid layouts.

🧩

Drop an image or click to upload

PNG, JPG, WEBP, BMP (up to 40)

What Is a CSS Sprite?

A CSS sprite merges many icons into a single image and uses background-position to display the needed part on the page.

This significantly reduces the number of image requests the browser makes — a common front-end performance optimization.

How to Use

Generate a sprite in three steps:

  • Upload multiple images (up to 40).
  • Choose a horizontal, vertical, or grid layout and adjust the gap.
  • Click Generate to download the sprite and copy the CSS code.

Tips

  • Normalize icon sizes first for a cleaner sprite sheet.
  • PNG keeps transparency, which is great for icons.
  • The generated CSS uses the relative path sprite.png — adjust it to where you actually store the file.

Frequently Asked Questions

What is a CSS sprite?+
A sprite combines several small images into one larger image. CSS background-position is used to show just one part of it, reducing HTTP requests and speeding up loading.
What's the difference between the three layouts?+
The horizontal layout arranges all images side by side, the vertical layout stacks them vertically, and the grid layout arranges them into rows and columns of roughly square cells.
How do I use the generated CSS?+
Each icon corresponds to a .icon-N style containing its width, height, background image path, and negative offsets. Just copy it into your stylesheet.
How many images can I combine at once?+
You can upload up to 40 images at a time, and adjust the gap to regenerate in real time.

Related Tools

Image to ASCII ArtWeb Image OptimizerSVG Wave Generator

CSS Sprite Generator — free online css sprite generator, sprite sheet generator, sprite sheet, css sprite, combine images. No signup required. Works in your browser.