🎮Utilities

Spritesheet Cutter

Cut a spritesheet into individual frames given rows and columns. ZIP download.

Rows

Columns

What is it for?

A spritesheet is that image bundling several animation frames laid out in a grid. What this tool does is pull each frame apart, leaving every one ready to drop into CSS sprites, 2D animations and games.

All you have to tell it is how many rows and columns the spritesheet has. Each cell turns into its own frame, and you can download them one by one.

The processing runs on your machine through Canvas.

Cut a spritesheet into frames

Game makers tend to keep several animation frames together in a single file, the spritesheet. The trouble is that, when it's time to use them, you often need the frames separated. This tool handles that cut on its own, splitting the spritesheet into individual frames.

You tell it how many rows and columns the grid has, and the image gets sliced into all the frames at once, each with its own download button. For anyone working with 2D animation, game dev or just needing to pull the sprites off a ready sheet, it's a real shortcut.

The spritesheet goes to no server at all, because the whole cut happens in the browser. Load it, set the grid and download the frames one by one — there is no ZIP packaging, so for large grids it helps to let the browser handle automatic downloads.

Frequently asked questions

Do the frames come out zipped in a single file?

They don't. Each frame shows up as a separate item in the preview grid, and downloading means one click per frame: the files arrive named frame-001.png, frame-002.png and so on, numbered left to right and top to bottom. A 4×4 spritesheet means sixteen clicks. There is no download-everything button and no ZIP being generated on this page.

My spritesheet has spacing between the cells. Does it work?

Not the way you would hope. The cut assumes a perfectly regular grid with no margin: width divided by the number of columns, height divided by the number of rows, and that is it. Sheets with 1 or 2 pixels of separation between cells, or with an outer border, come out with every frame shifted, each one carrying a slice of its neighbour. A variable-size atlas with a .json or .plist coordinate file is out of reach as well, so trim the margins in an editor first.

Does the cut ruin the pixels of pixel art?

It doesn't. The crop is 1:1 with no resampling: every frame keeps the original pixels, canvas smoothing stays switched off and the preview uses pixelated rendering, so nothing shows up blurry. PNG transparency survives intact. The one detail to watch is the whole-number division — when width or height isn't an exact multiple of the column and row counts, the leftover pixels along the right and bottom edges get thrown away.

Related Tools

🎨

Color Adjuster

Lighten, darken, invert, desaturate or adjust the saturation of a HEX, RGB or HSL color. See the result in real time.

📍

Map Points

Plot geographic coordinates (latitude/longitude) on an interactive OpenStreetMap. Add markers by clicking the map or entering coordinates.

🎨

Color Mixer

Mix two colors and get the resulting color. Control the percentage weight of each color. Result in HEX, RGB and HSL.

▶️

YouTube Embed Builder

Builds a YouTube embed <iframe> from the video ID with customizable width and height.

🕐

Digital Clock

Full-screen digital clock showing local time in real time. Supports 12h and 24h format with fullscreen mode.

📐

IPv4 CIDR Range Expander

Expand IPv4 CIDR blocks (e.g. 192.168.0.0/24) into first IP, last IP, broadcast, mask and total usable hosts. Useful for network and firewall planning. Everything in your browser.