What grid sizes are supported?

Square canvases from 8x8 up to 64x64. Changing the size starts a new blank sprite rather than resizing the current one, so pick your size (or save your current project) before you start drawing.

How does the dither tool work?

It flood-fills the clicked region with a 4x4 ordered (Bayer) dither pattern blending your primary and secondary colors by a density from 0 (all primary) to 1 (all secondary). The pattern is aligned to absolute canvas coordinates, so separately dithered regions still line up into one consistent texture.

What's the difference between symmetry and layers?

Symmetry (horizontal/vertical/quad) mirrors each stroke live as you draw within one layer. Layers are independent, stackable pixel buffers with their own visibility and opacity, composited together — use them for things like a separate outline or shading pass.

Which sprite-sheet atlas format should I use?

Pixi and Phaser both natively load the same TexturePacker 'JSON Hash' format this tool exports for those flavors. Godot and Unity have no equivalent single-file standard, so those exports are documented region lists meant to drive a short import script rather than a format the engine reads out of the box.

PNG vs APNG vs GIF — which export should I use?

PNG exports only the current frame as a static image. APNG and GIF both export the full animation — APNG keeps full 8-bit RGBA (no palette limit, no dithered edges) but has weaker viewer support; GIF is universally supported but quantizes to a shared palette of up to 255 colors.

Can I save my work and come back later?

Yes — Save project downloads a run-length-encoded JSON file with every frame and layer, and Load project restores it exactly, including layer opacity and visibility.

Does anything leave my browser?

No. Drawing, compositing, and every export format (PNG, APNG, GIF, atlas JSON, CSS) are generated entirely client-side; your artwork never leaves the browser.

Pixel Art Sprite Studio

Draw retro pixel art with symmetry and dithering, animate frames with onion skinning, and export PNG, GIF, APNG, sprite atlases, or CSS steps() animations.

PrimarySecondary

FPS8

Layers

Opacity100%

Frames

Onion skin

Export

Atlas JSON

{
  "frames": {
    "frame_0": {
      "frame": {
        "x": 0,
        "y": 0,
        "w": 16,
        "h": 16
      },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {
        "x": 0,
        "y": 0,
        "w": 16,
        "h": 16
      },
      "sourceSize": {
        "w": 16,
        "h": 16
      }
    }
  },
  "meta": {
    "app": "DevTools Pixel Art Sprite Studio",
    "image": "sprite-sheet.png",
    "size": {
      "w": 16,
      "h": 16
    },
    "scale": "1"
  }
}

CSS animation

.sprite {
  width: 16px;
  height: 16px;
  background-image: url("sheet.png");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  image-rendering: pixelated;
  animation: sprite-play 0.125s steps(1) infinite;
}

@keyframes sprite-play {
  from { background-position: 0 0; }
  to { background-position: -16px 0; }
}

About this tool

Draw retro pixel art with symmetry and dithering, animate frames with onion skinning, and export PNG, GIF, APNG, sprite atlases or CSS animations. Pixel Art Sprite Studio runs in the browser on DevTools. There is no signup, and your input stays on this device unless the tool explicitly performs a live network lookup.

What this tool does not do

Pixel Art Sprite Studio is a free in-browser utility, not a hosted API. It does not keep server-side history and is not a substitute for production verification in your own stack.

How do I use this tool?

How do I use Pixel Art Sprite Studio?
Open Pixel Art Sprite Studio, enter or paste your input, and copy the result. The page works without an account.

Pixel Art Sprite Studio

Layers

Frames

Export

About this tool

What this tool does not do

How do I use this tool?

How do I use Pixel Art Sprite Studio?

Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features

Symmetry, Dithering and the Sprite Sheet: A Pixel Artist's Toolkit

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

CSS Spring Physics Generator

Cubic Bezier / Easing Generator

Pixel Art Sprite Studio

Layers

Frames

Export

Layers

Frames

Export

About this tool

What this tool does not do

How do I use this tool?

How do I use Pixel Art Sprite Studio?

Related guides

Your Font Has Axes: A Field Guide to Variable Fonts and OpenType Features

Symmetry, Dithering and the Sprite Sheet: A Pixel Artist's Toolkit

Related tools

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

CSS Spring Physics Generator

Cubic Bezier / Easing Generator

Layers

Frames

Export