Sprite Sheet Generator
Combine multiple images into a sprite sheet and generate CSS background-position offsets.
Layout
Upload images to generate a sprite sheet.
Related Tools
APPApp Icon Generator
Generate all standard iOS and Android app icon sizes from a single source image.
IMGImage Collage Maker
Arrange 2–4 images into a collage using preset grid layouts, with adjustable gap.
>_Code to Image
Turn code snippets into beautiful shareable images with a window chrome and syntax highlighting.
FAQ
- What is a CSS sprite sheet?
- A sprite sheet is a single image file containing multiple smaller images (sprites). By using CSS background-position, you can display individual sprites, reducing HTTP requests and improving page load performance.
- What layout options are available?
- This tool supports horizontal strip (all images in a single row), vertical strip (all images in a single column), and automatic grid layout where images are arranged in rows and columns.
- How do I use the generated CSS?
- Apply the generated class or background-position values to any HTML element. Set the element's width and height to the sprite dimensions, reference the downloaded sprite sheet as the background-image, and use the provided background-position to show the correct sprite.
Upload multiple images and combine them into a single sprite sheet arranged horizontally, vertically, or in a grid. The tool computes the canvas layout, renders all images side by side, and generates ready-to-use CSS with background-position offsets for each sprite. Preview the sprite sheet, copy the CSS, or download the combined PNG.