Sprite Sheet Generator

Combine frames into a single sprite and export CSS/JSON frame definitions.

Overview

Generate a sprite sheet for web/games in the browser, and export the sprite map with frame coordinates as JSON/CSS.

How to use

  1. Drop same-sized frame images.
  2. Configure rows/cols, padding, and ordering (row/column-major).
  3. Select output format (PNG/WebP) and compression, then save with CSS/JSON.
  4. Optionally set a frame name prefix and numbering rule.

Use cases

  • Icon sprites for CSS animations.
  • Combine 2D game frame sequences (walk/attack).
  • Lightweight looping alternative to Lottie/APNG.

Tips & knowledge

  • Sprites reduce HTTP requests and help performance.
  • Trim transparent margins to reduce size.
  • Control animation timing with CSS steps() or JS timers.

Related tools

Sequence to AnimationAdvanced Converter