Sprite Sheet Generator
Upload images, arrange them in a grid, and generate a sprite sheet with CSS code.
Drop images here or click to upload
PNG, JPG, SVG, GIF, WebP supported
About This Tool
The Sprite Sheet Generator is a free browser-based tool that combines multiple images into a single sprite sheet image and generates the corresponding CSS code. CSS sprites have been a foundational web performance technique since the early days of the web, reducing the number of HTTP requests by combining many small images into one larger image and using CSS background-position to display individual sprites.
This tool accepts PNG, JPG, SVG, GIF, and WebP images via drag-and-drop or file picker. You can configure the number of columns, padding between sprites, background color (including transparent), and a custom CSS class prefix. The tool arranges images in a uniform grid and renders the combined sprite sheet using the Canvas API entirely in your browser. No data is ever sent to a server.
Once the sprite sheet is generated, you can preview it with a transparent checkerboard background, download it as a PNG file, and copy the generated CSS code. The CSS output includes a base class with the background-image property and individual classes for each sprite with exact width, height, and background-position values.
The tool also displays a position table showing each sprite's dimensions and offsets, making it easy to verify placement. You can reorder sprites by dragging them in the sprite list, and use the auto-detect button to calculate the optimal number of columns for a square-ish grid layout.
Whether you are building icon sets for a web application, creating sprite sheets for HTML5 game animations, or optimizing images for email HTML templates, this tool streamlines the process without requiring any design software.
How to Use
- Upload images by dragging files into the drop zone or clicking to use the file picker. Multiple files can be uploaded at once.
- Reorder sprites by dragging them in the sprite list to change their position in the final sprite sheet.
- Configure the number of columns for the grid layout, or click the auto-detect button to calculate the optimal grid.
- Set the padding between sprites (in pixels) to prevent edge bleed.
- Choose a background color (transparent, white, black, or a custom color).
- Optionally change the CSS class prefix (default is
sprite). - Preview the generated sprite sheet below the configuration panel.
- Click Download PNG to save the sprite sheet image, or Copy CSS to copy the generated CSS code to your clipboard.
- Review the Sprite Positions table to see exact dimensions and offsets for each sprite.
- Use the keyboard shortcut Ctrl+Shift+C to quickly copy the CSS output.
Popular Sprite Sheet Examples
FAQ
Is my data safe when using this tool?
Yes. All image processing happens entirely in your browser using the Canvas API. Your images are never uploaded to any server. The tool works offline once loaded, and no data leaves your device.
What image formats can I upload?
The tool accepts PNG, JPG/JPEG, SVG, GIF, and WebP images. All common web image formats are supported. Uploaded images are loaded as data URLs and drawn onto an HTML5 canvas.
How does the CSS background-position work?
CSS sprites use a single background image and negative background-position values to show only the portion of the image that corresponds to a specific sprite. For example, background-position: -50px -100px shifts the background image 50px to the left and 100px up, revealing the sprite at that offset.
Can I create transparent sprite sheets?
Yes. The default background is transparent. The generated PNG will have an alpha channel, so sprites with transparency will be preserved. The preview uses a checkerboard pattern to visualize transparency.
Are CSS sprites still relevant in modern web development?
While HTTP/2 multiplexing has reduced the need for sprite sheets in many cases, they remain valuable for icon sets, game development, animation frames, email HTML (which lacks HTTP/2), and situations where minimizing requests is critical. SVG sprites are an alternative for vector icons.
Can I reorder the sprites after uploading?
Yes. Each sprite in the list has a drag handle. Simply drag and drop sprites to rearrange their order. The sprite sheet and CSS are regenerated automatically when you change the order.
What does the auto-detect grid button do?
The auto-detect button calculates the square root of the total number of sprites and sets that as the column count. This produces a near-square grid layout, which is often the most efficient arrangement for minimizing total image dimensions.
Related Tools
SVG Sprite Generator
Combine multiple SVG files into a single sprite sheet with <symbol> elements. Preview icons, generate usage code, and download sprite.svg.
Image Format Converter
Convert images between JPEG, PNG, WebP, BMP, and AVIF formats with quality control and batch processing.
Image Placeholder Generator
Generate custom placeholder images with configurable size, colors, text, and format. Download as PNG, JPEG, or SVG.