CSS Sprite Generator

What is a CSS sprite?

A CSS sprite is a single image file that contains multiple smaller images (icons, buttons, badges) packed together, combined with CSS rules that display just one slice of the master image at a time. Instead of loading 20 separate icon files, the browser downloads one sprite PNG and uses background-position to reveal only the relevant region for each element. The technique was popularized in the mid-2000s and remains a reliable way to reduce HTTP requests and speed up icon-heavy interfaces.

Each sprite cell is defined by four numbers in the CSS: a width, a height, and a negative background-position that shifts the master image so the desired icon lands inside the element's box. For a vertical sprite, the X offset is 0 and the Y offset grows more negative for each subsequent icon; for a horizontal sprite, the X offset grows and the Y offset stays at 0. This tool generates both the packed PNG and the matching CSS automatically, so you can paste the rules straight into your stylesheet.

What does this tool do?

This CSS Sprite Generator takes any number of input images and arranges them into a single sprite sheet on a canvas. You control three parameters that fully define the layout:

• Direction. Vertical stacks images from top to bottom (ideal for icon sets with similar widths); horizontal lines them up left to right (ideal for similar heights). The generator picks the canvas dimensions automatically.
• Spacing. The gap in pixels between sprite cells. Zero produces a tightly packed sheet; a small gap makes individual cells easier to read in the preview and avoids bleed when CSS rounding is imprecise.
• Background. Transparent keeps the original alpha channel (best for PNG icons overlaid on varied backgrounds); White fills the canvas with #ffffff (useful when the sprite will be served as JPG or shown on a white surface).

The final canvas is exported as a PNG named sprite.png, and a ready-to-use CSS block is generated in a copyable textarea. Each rule is named .sprite-N where N is the 1-based index in the order you added the images.

When to use a CSS sprite

Sprites are useful whenever a page or app shows many small images at once and you want to cut request count and loading flicker. Common scenarios include:

• Icon sets. Combine UI icons (home, search, menu, close, etc.) into one sheet so the toolbar loads in a single request.
• Button states. Pack default, hover, and active states side by side and swap background-position on interaction.
• Rating stars. Stack full, half, and empty stars vertically and shift the position to render any score.
• Flags or badges. Line up country flags or achievement badges horizontally and reveal one per element.
• Email templates. Sprites reduce external requests in environments where many images load slowly or inconsistently.
• Legacy browsers. When icon fonts or inline SVG are not an option, a PNG sprite works everywhere, including older Internet Explorer.

For modern projects that support inline SVG or icon fonts, those techniques often win on crispness and color control. CSS sprites still shine when you have many raster PNG icons or need a single-file asset bundle.

How to generate a sprite

Building a sprite with this tool takes just a few seconds and runs entirely in your browser. Follow these four steps:

1. Add images. Click the upload area or drag in multiple PNG, JPG, WebP, GIF, or BMP files. Each image is decoded locally and added to the source list in order. You can keep adding more after the first batch.
2. Set the layout. Choose vertical or horizontal direction, adjust the spacing slider (0–40 px), and pick transparent or white background.
3. Generate. Click "Generate Sprite" — the tool packs every image into one canvas, computes each cell's position, renders a preview, and writes the matching CSS into the textarea.
4. Download and copy. Click "Download sprite.png" to save the master image, then click "Copy CSS" to copy the rules into your clipboard and paste them into your stylesheet.

Because every step runs locally in your browser using JavaScript and the Canvas API, your images are never uploaded to a server. The sprite generation is completely private and suitable for confidential assets.

Sprite layout tips

A few practical tips will help you build cleaner sprites. Sort icons by similar dimensions before adding them so the packed sheet stays compact; mixed sizes still work but leave transparent gaps. For icon sets, vertical direction works well when widths are roughly equal, while horizontal direction suits equal heights. A spacing of 1–2 px prevents sub-pixel bleed when browsers round background-position during scaling. Keep the master PNG lossless (this tool always exports PNG) so icon edges stay crisp, and prefer transparent background for icons that will overlay varied surfaces. Finally, name your source files in a sortable order (01-home, 02-search, …) before adding them, since the CSS class index follows the input order.