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. (Opcional) Establece prefijo y regla de numeración para fotogramas.

Casos de uso

  • Sprites de iconos para animaciones CSS.
  • Combinar secuencias (caminar/ataque) de juegos 2D.
  • Alternativa ligera a bucles 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