What grid size should I use for my sprite sheet?

The tool auto-calculates a square-ish grid (e.g., 4×4 for 16 frames). You can customize the column count. For CSS step() animations, use a single row (columns = total frames, rows = 1) for the simplest animation code.

Will the sprite sheet look the same as the animated GIF?

Yes — every frame is extracted and placed onto the sprite sheet at full quality. Sprite sheets are lossless PNG, so image quality is preserved. Note that frame timing metadata is not embedded in the sprite sheet image itself.

Can I use the sprite sheet with CSS animations?

Yes! The tool provides a ready-to-use CSS animation snippet using background-position and steps() timing. Works for single-row sprite sheets in any modern browser.

How do I turn a GIF into a sprite sheet?

To turn gif into sprite sheet, upload your animated GIF, choose the grid columns, preview, then generate. That's how to turn a gif into a sprite sheet in five steps, and the easiest way to create sprite sheet from gif right in your browser.

Is there a GIF to sprite sheet converter that doesn't upload my file?

Yes. This GIF to sprite sheet converter runs entirely on your device, so you can convert gif to sprite sheet without uploading anything. Unlike a generic sprite converter, it keeps every frame in true color.

Can I convert a GIF to a sprite sheet for VRChat?

Yes. VRChat avatar animations often use sprite sheets. This tool builds a vrchat gif to sprite sheet layout you can import directly. For a gif to vrc sprite sheet, just set the grid and generate.

Can I make a sprite sheet from a WebP or APNG?

This tool reads animated GIFs. To make a webp to sprite sheet or apng to sprite sheet, first convert your WebP or APNG to GIF with any converter, then use this tool.

Is this also a sprite sheet maker from gif?

Yes — it works as a sprite sheet maker from gif and a gif sprite sheet generator, and even as a css sprite animation generator. Build a sprite sheet from gif, copy the CSS, and you're done.

Can I export the sprite sheet as a PNG strip and use it online?

Absolutely. It's a gif to spritesheet converter that exports a lossless PNG, including a gif to png sprite strip. As a gif to sprite sheet online tool, there's nothing to install.

Do you export a JSON atlas for Phaser, Godot, or Unity?

Yes. Along with the PNG, the tool exports a sprite sheet JSON atlas in a Phaser / TexturePacker hash format (each frame's x, y, width, height). Drop the PNG plus the JSON into Godot's AtlasTexture, Unity's sprite sheet importer, or a Phaser sprite sheet loader and the frames map automatically.

Can I control the animation speed (FPS) of the CSS sprite?

By default the CSS uses the GIF's original frame timing. Turn on Speed (FPS) to override playback with a uniform frame rate — useful when the GIF's delays are uneven or you want a faster, lighter CSS animation.

Can I add a background color to the sprite sheet?

Frames stay transparent by default so any page background shows through. If you need an opaque sheet, use the Background picker to fill solid white, black, or any color behind every frame before generating.

What files do I get when I convert a GIF to a sprite sheet?

Four files: the lossless PNG sprite sheet, a ready-to-use CSS animation snippet with steps() timing, a standalone HTML demo that plays the animation in any browser, and a Phaser-style JSON atlas for Unity, Godot or TexturePacker.

BulkPicTools

Local · 0 uploads

Convert GIF to Sprite Sheet — Free, No Upload

Turn a GIF into a sprite sheet free online — custom grid, copy-paste CSS for Unity, Godot, VRChat. Lossless PNG, no upload, no watermark.

Arraste e solte seu GIF

GIF animado — convertido em folha de sprites localmente, sem upload

What changes in your file

One animated GIF becomes one static sprite sheet — every frame preserved in lossless PNG, ready for CSS or game-engine step animation. No upload, no quality loss.

Animated GIF → sprite sheet

Sprite sheet (PNG)

FormatStatic PNG
Frames6 frames in 1 image
Dimensions1440 × 240 px

Original GIF

FormatAnimated GIF
Frames6 separate frames
Dimensions320 × 320 px

Format: Animated GIFStatic sprite sheet (PNG)
Frames: 6 separate frames1 combined image
Dimensions: 320 × 320 px1440 × 240 px
Playback: GIF auto-loopCSS / engine step animation

Every frame is copied into lossless PNG — no recompression, so the sprite sheet is pixel-identical to the original frames. You get one grid file, plus copy-paste CSS and a standalone HTML demo to replay the animation anywhere.

Principais recursos do GIF to Sprite Sheet Converter

Custom grid rows & columns

Choose how many columns and rows to organize your GIF frames into a compact sprite sheet. Auto-calculates for the best fit.

CSS animation code included

Get a ready-to-use CSS animation snippet with steps() timing — just copy and paste into your web project.

Lossless PNG output

Export your sprite sheet as a high-quality PNG image — perfect for game engines, CSS sprites, and pixel-accurate animations.

Game-engine JSON atlas

Alongside the PNG, download a Phaser-style JSON atlas (each frame's x, y, width, height) that drops straight into Unity, Godot, or any TexturePacker pipeline.

HTML demo file + live preview

You also get a standalone HTML demo that plays the animation in any browser. Preview it right on the results page — switch the background between transparent, checkerboard, white and dark — then read or copy the HTML, CSS and JSON before downloading.

Local processing, no upload

Your GIF never leaves your device. All sprite sheet generation happens in your browser — no server uploads, no privacy concerns.

Guias e Dicas

Why Convert GIF to Sprite Sheet? A Developer's Guide

Converting an animated GIF into a sprite sheet unlocks better quality, smaller file sizes, and more control over playback. While GIFs are limited to 256 colors and lack per-frame control in browsers, sprite sheets offer true color (16.7 million colors) and precise CSS or JavaScript animation control.

Sprite Sheets for Game Development

Game engines like Unity, Godot, and Unreal Engine import sprite sheets natively. Converting a GIF to a sprite sheet lets you use the engine's sprite system for frame-by-frame control, collision detection, and animation blending. The lossless PNG output ensures pixel-perfect fidelity.

CSS Sprite Animation for the Web

For web developers, sprite sheets enable performant CSS animations using the background-position technique with steps() timing. This approach is GPU-accelerated, unlike GIF rendering which relies on CPU. The tool generates ready-to-use CSS code — just copy and paste. Use a single-row layout for the simplest CSS animation implementation.

Going the other way? Turn a sprite sheet back into a GIF.

How to Turn a GIF into a Sprite Sheet — Step by Step

Whether you're building a game, a VRChat avatar animation, or a CSS sprite, the workflow is the same. Here's the practical path from an animated GIF to a ready-to-use sprite sheet.

Steps

Upload the GIF. Drag in any animated GIF. The tool reads the frame count, size, and timing locally — nothing is uploaded.
Set the grid. Pick the number of columns; rows are calculated automatically. A single row gives the simplest CSS steps() animation.
Preview. The frames are laid out on a static PNG so you can check the order before exporting.
Generate and copy CSS. Download the lossless PNG sprite sheet and paste the included CSS animation snippet into your project.
Watch it play first. The results page runs the generated HTML demo, so you can see the animation and switch backgrounds before you download anything.

For the reverse flow — turning a sprite sheet back into an animated GIF — use the Sprite Sheet to GIF converter.

Como usar

Upload your GIF

Drag and drop an animated GIF, or click to select one from your device. The tool automatically reads frame count, dimensions, and timing.

Set grid layout

Choose the number of columns for your sprite sheet. Rows are auto-calculated based on total frame count. Preview updates in real time.

Generate, preview & copy the code

Click Generate Sprite Sheet. On the results page the built-in preview plays your animation — switch backgrounds to check transparent frames — then copy the CSS, HTML or JSON before downloading the PNG.

Perguntas frequentes sobre GIF to Sprite Sheet Converter

Upload your animated GIF, set the grid columns (e.g., 4 columns for a 16-frame animation = 4×4 grid), and generate the sprite sheet. The output PNG can be directly imported into Unity, Unreal Engine, or Godot as a sprite sheet texture.