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

Pixel Art Sprite Studio is a grid-based pixel editor purpose-built for game sprites: a square canvas from 8x8 up to 64x64, five curated retro palettes (PICO-8, Game Boy, NES, C64, Endesga-32) with their canonical hex values, and a pencil/eraser/flood-fill/ordered-dither/eyedropper toolset with horizontal, vertical and quad symmetry for fast, mirrored character and tile work.

Each frame supports multiple layers with per-layer visibility and opacity, composited with standard Porter-Duff alpha blending, so you can sketch a silhouette on one layer and shade or add an outline on another without disturbing the base art.

The frame timeline turns a single sprite into an animation: add, duplicate and reorder frames, set a per-frame duration, and toggle onion skinning to see the previous frame ghosted behind the one you're editing.

Export covers both static and animated use: a single-frame PNG, a full animated PNG (APNG), an animated GIF, a horizontal sprite-sheet PNG with matching atlas JSON (Pixi/Phaser's native TexturePacker format, plus documented region lists for Godot and Unity import scripts), or a CSS steps() snippet for background-position sprite animation.

Projects can be saved and reloaded as JSON (run-length encoded per layer) so you can pick up an in-progress sprite later without re-drawing it.

How to use

Pick a size and palette
Choose a grid size (creates a fresh sprite) and a retro palette from the toolbar; click a swatch to set the primary color, right-click to set the secondary.
Draw
Select Pencil, Eraser, Fill, Dither or Eyedropper, optionally turn on symmetry, then click or drag on the canvas.
Dither a gradient
Pick the Dither tool, set primary/secondary colors and density, then click a region to flood-fill it with an ordered Bayer dither blend.
Layer your art
Add layers in the Layers panel, adjust each layer's opacity or visibility, and reorder them to control what's on top.
Animate
Add frames in the timeline, set each frame's duration, enable onion skinning to trace the previous frame, and press Play to preview.
Export
Download a PNG, APNG, GIF, sprite-sheet PNG, atlas JSON for your engine, or a CSS steps() snippet from the Export panel.

Use cases

Game jam sprites

Draw and animate character or item sprites in the browser, then export a sheet + atlas JSON straight into Pixi, Phaser, Godot or Unity.

Retro-style icons and avatars

Use a locked palette like PICO-8 or Game Boy to keep icon sets visually consistent with a project's retro art direction.

Sprite sheet prototyping

Block out an animation's frame count and timing quickly, preview it with Play, and iterate before committing to final art.

CSS sprite animations

Export the steps() snippet to drive a lightweight background-position animation for web UI without a GIF or video file.

Common mistakes

Mistake:Expecting the grid-size selector to resize the current sprite

Fix:Changing the size starts a brand-new blank sprite rather than scaling existing art — pick your size before you start drawing, or export/save first.

Mistake:Using Fill on a layer with semi-transparent pixels expecting it to blend

Fix:Flood fill and dither fill both match the exact source color at the clicked pixel (including null/transparent) and replace it outright — they don't blend into existing colors.

Mistake:Assuming Godot or Unity load the atlas JSON natively

Fix:Only the Pixi/Phaser export is a format either engine loads directly (TexturePacker JSON Hash); the Godot and Unity exports are documented region lists meant to drive a short import script.

Mistake:Forgetting a hidden layer still exists in Save/Load

Fix:Hidden layers are skipped when compositing exports (PNG/GIF/APNG/atlas) but are preserved in the saved project JSON, so toggling visibility back on later still works.

Frequently asked questions

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

One font file, infinite weights. How the fvar and gvar tables actually work, why a font inspector can show you the axes but not animate between them, and the metric-override trick that kills fallback-font layout shift.

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

Why PICO-8 has exactly 16 colors, how a Bayer matrix fakes a gradient with none, and what actually happens when you export a walk cycle to Pixi, Phaser or Godot.

Pixel Art Sprite Studio

Layers

Frames

Export

About this tool

How to use

Pick a size and palette

Draw

Dither a gradient

Layer your art

Animate

Export

Use cases

Game jam sprites

Retro-style icons and avatars

Sprite sheet prototyping

CSS sprite animations

Common mistakes

Frequently asked questions

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

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

References & standards

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

Cubic Bezier / Easing Generator

Dummy Avatar Generator

Pixel Art Sprite Studio

Layers

Frames

Export

Layers

Frames

Export

About this tool

How to use

Pick a size and palette

Draw

Dither a gradient

Layer your art

Animate

Export

Use cases

Game jam sprites

Retro-style icons and avatars

Sprite sheet prototyping

CSS sprite animations

Common mistakes

Frequently asked questions

What grid sizes are supported?

How does the dither tool work?

What's the difference between symmetry and layers?

Which sprite-sheet atlas format should I use?

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

Can I save my work and come back later?

Does anything leave my browser?

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

References & standards

Related tools

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

Cubic Bezier / Easing Generator

Dummy Avatar Generator

Layers

Frames

Export