Sprite Sheet Generator
Combine multiple images into a CSS sprite sheet online — free. Downloads the sprite PNG, ready-to-paste CSS background-position code for every sprite, and a JSON manifest for Phaser and PixiJS game engines. Retina @2x mode. No software, no upload, 100% browser-based.
Sprite Sheet Generator Tool
Generate sprite sheet
Everything in this free online sprite sheet generator
Built for web developers, game developers and icon designers who need a professional sprite atlas without paying for TexturePacker or installing software.
.sprite) to match your project naming convention.How to create a CSS sprite sheet online — step by step
this.load.atlas() or PixiJS's Assets.load.bundle().How this sprite sheet generator compares
We reviewed every free online CSS sprite generator and game sprite tool. Here's the honest feature comparison.
| Feature | LazyTools ✦ | Instant Sprite | Final Parsec | CodeShack |
|---|---|---|---|---|
| Generate sprite sheet from multiple images | ✔ Yes | ✔ Yes | ✔ Yes | ✔ Yes |
| Grid, horizontal and vertical layout modes | ✔ All three | ✔ Grid only | ✔ Yes | ✘ Grid only |
| Auto-generated CSS background-position | ✔ Yes | ✔ Yes | ✔ CSS export | ✘ No |
| Custom CSS class name prefix | ✔ Yes | ✘ No | ✘ No | ✘ No |
| JSON manifest for Phaser / PixiJS | ✔ Yes | ✘ No | ✘ No | ✘ No |
| Retina @2x mode with adjusted CSS | ✔ Yes | ✘ No | ✘ No | ✘ No |
| Live sprite preview (verify offsets visually) | ✔ Yes | ✘ No | ✘ No | ✘ No |
| HTML usage example code | ✔ Yes | ✘ No | ✘ No | ✘ No |
| Configurable padding between sprites | ✔ Yes | ✘ No | ✔ Yes | ✘ No |
| 100% client-side (no image upload) | ✔ Always | ✔ Yes | ✔ Yes | ✘ Uploads |
| Download PNG + CSS + JSON in one session | ✔ Yes | ✘ PNG only | ✘ PNG + CSS | ✘ PNG only |
CSS sprites explained — the background-position technique
Understanding how CSS sprites work helps you use them more effectively and debug any display issues that arise.
How CSS background-position works for sprites
Each sprite in the sheet is shown by setting the combined image as a background-image on a container element, then using background-position to offset the image so only the correct sprite is visible through the container's constrained width and height. For example:
The negative x and y values move the background image left and up within the container, exposing only the target sprite. The container's width and height clip everything else.
When to use sprites vs individual image files
CSS sprites are most valuable when you have many small images — navigation icons, social media logos, UI state indicators, button icons — that are loaded repeatedly across a page or application. Combining them into one file means one HTTP request instead of many, which has a measurable impact on page load time, particularly on high-latency connections or for first-time visitors with cold caches.
JSON spritesheet manifest format
Game engines like Phaser 3 and PixiJS use a JSON atlas format to load sprite sheets. The JSON file describes where each sprite lives in the sheet, allowing the engine to extract individual frames by name:
This format is compatible with Phaser 3's this.load.atlas(), PixiJS's PIXI.Assets.load(), and most other game framework atlas loaders.
Retina @2x sprite sheets — how they work
A retina (or HiDPI) sprite sheet contains images drawn at 2× the intended display size. When loaded in CSS, the background-size is set to 50% of the actual image dimensions, making each sprite display at the correct size. The doubled pixel density means each sprite appears twice as sharp on Retina MacBook screens, iPhone screens and 4K monitors.
The Complete Guide to CSS Sprite Sheets and Game Sprite Atlases
Sprite sheets are one of the oldest performance optimisation techniques in web development — and one of the most relevant to game development. Whether you're building a website that uses dozens of small icons, a Phaser game with animated characters, or a PixiJS application with a complex UI, understanding how sprite sheets work and how to generate them efficiently matters for both performance and workflow.
What is a sprite sheet and why does it matter?
A sprite sheet (also called a texture atlas or sprite atlas) is a single image file that contains multiple smaller images packed together. Instead of loading 30 separate icon files, you load one sprite sheet and use CSS or a game engine's atlas loader to display each individual image from its known position within the sheet.
The performance case is straightforward: every HTTP request has latency overhead — DNS lookup, TCP connection (or reuse), TLS handshake, request-response round trip. On a fast broadband connection, each request adds perhaps 50ms. On a mobile network, each request might add 200ms or more. A page that loads 30 small icons with 30 separate requests can take 1.5–6 seconds of cumulative latency just from those HTTP round trips. Loading the same 30 icons as a single sprite sheet — one HTTP request — eliminates that overhead entirely.
CSS sprites for web development
For web developers, CSS sprite generation is primarily about icon sets, navigation graphics and UI state images (hover, active, disabled states of the same icon). The workflow is: combine all icons into one sprite sheet image, then use CSS background-position to show only the relevant icon in each HTML element.
The CSS generated by this tool follows the most widely used naming convention: a configurable prefix (default .sprite) followed by a hyphen and the source filename without extension. This keeps class names predictable and matches the original filename, making it easy to look up any sprite in the stylesheet.
A complete CSS sprite workflow for an icon navigation:
- Prepare each icon as a PNG with transparent background, at the exact size you want it displayed (e.g. 24×24px for a standard icon, 48×48px for a retina icon)
- Upload all icons to the sprite generator, choose Grid or Horizontal layout, set 2px padding, and generate
- Download the sprite PNG and CSS file. Add the CSS link to your HTML. Add the generated class names to your HTML elements
- If supporting retina displays: also generate a @2x sheet with the same images drawn at 48×48px, and load it via the
@media (-webkit-min-device-pixel-ratio: 2)media query
Game sprite sheets with Phaser 3 and PixiJS
Game development has a different use case for sprite sheets. In games, a sprite sheet typically contains all the frames of a character's animation arranged in sequence — walk cycle, idle, attack, jump. A game sprite sheet generator needs to output not just the packed image but also a data file (JSON or XML) that tells the engine exactly where each frame sits.
Phaser 3 uses its atlas loader to import sprite sheets:
The JSON file this tool exports matches this format exactly. Each frame's name comes from the original filename (without extension), so if you upload player-idle.png, it appears in the JSON as "player-idle" and in Phaser's texture cache under that key.
For PixiJS, the same JSON format works with the Assets API:
Why padding between sprites matters
Even with correct background-position values, sub-pixel rendering on some browsers and screen sizes can cause edge pixels from adjacent sprites to bleed into the displayed area. Adding 1–4 pixels of transparent padding between each sprite prevents this bleeding entirely. The generated CSS accounts for the padding automatically — the background-position values already include the offset for your chosen padding value.
Free sprite sheet generator vs TexturePacker
TexturePacker is the industry-standard professional sprite atlas tool — it offers advanced packing algorithms (maxrects, shelf, polygon) that produce smaller sheets than grid-based packing, supports dozens of export formats, and integrates with Unity, Unreal, Godot and every major game engine. For professional game development with complex assets, it's worth the cost.
For web development, small games, prototypes, icon sets, and any project where a simple grid-based or strip layout is sufficient, this free browser-based sprite sheet generator covers all the bases — without installation, without cost, and without uploading proprietary art to a third-party server. The JSON format it outputs is compatible with Phaser and PixiJS without any additional tooling.