A CSS sprite sheet is a single image that combines multiple smaller images into one file. By using CSS background-position, you can display only the portion of the image you need for each element. This technique reduces HTTP requests, speeds up page loading, and is especially useful for icons, buttons, and UI elements.

Base64 encoding embeds the image directly into your CSS as a data URI. This eliminates the need for a separate image file and an additional HTTP request. It's ideal for smaller sprite sheets (icons, UI elements) where the slight size increase (~33%) is offset by the reduced network overhead. For larger images, external files are generally preferred.

Copy the generated CSS into your stylesheet. Each sprite gets a class like .sprite-icon-name. Add this class to an HTML element (e.g., <span> or <div>), and the element will display that specific sprite. Make sure the element has the correct width and height set (which is included in the generated CSS).

Grid: Images are arranged in rows and columns with uniform cell sizes (using the largest width & height). Best for icon sets with varying dimensions.
Horizontal: All images are placed side by side in a single row. Ideal for images with similar heights.
Vertical: All images are stacked in a single column. Best for images with similar widths.

Browser canvas elements have maximum size limits (typically around 16,384 × 16,384 pixels or 268 megapixels). Our tool warns you if the sprite sheet exceeds practical limits. For web performance, keep Base64 sprite sheets under ~50KB encoded. If your sprite sheet is larger, consider using an external PNG file instead of Base64 embedding.

Yes! Simply drag and drop the thumbnail images in the list to reorder them. The sprite sheet preview and CSS code update automatically. You can also delete individual images by clicking the × button on each thumbnail.

Our tool supports all common web image formats: PNG (recommended for transparency), JPG, GIF, SVG (rasterized on upload), WebP, and BMP. The output sprite sheet is always generated as a PNG to preserve transparency and quality.

Absolutely. All processing happens entirely in your browser using JavaScript Canvas API. Your images are never uploaded to any server. This tool works fully offline once the page is loaded. Your privacy is 100% guaranteed.