CSS Sprite Generator
Build a browser-based CSS sprite sheet with configurable layout, spacing, class names, preview and ready-to-use CSS/HTML.
Related tools
How to Use
- 1Select two or more image assets and review the ordered list.
- 2Choose vertical or horizontal layout, gap, padding, background and output format.
- 3Edit the base CSS class and each generated class name, then reorder or remove assets.
- 4Generate the sprite, inspect the PNG/WebP preview and copy the CSS or HTML snippet.
- 5Download the sprite bundle containing the image, stylesheet and example markup.
About this tool
Create a reusable CSS sprite sheet from multiple icons with configurable spacing, transparent or solid background, CSS classes and HTML markup.