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. Optional Präfix für Frame-Namen und Nummerierungsregel festlegen.

Anwendungsfälle

  • Icon‑Sprites für CSS‑Animationen.
  • 2D‑Game‑Frame‑Sequenzen (Gehen/Angriff) kombinieren.
  • Leichtgewichtige Loop‑Alternative zu 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