SuperDevTools
EN

Pixel art maker

Grid size
View
Layers

The Drawing layer sits on top of the Background. Tools work on the selected layer; a hidden layer is not exported.

Starter templates
Animation
Export and import

Nothing is uploaded: your drawing stays on this device and is saved automatically in this browser.

Shortcuts: B pencil, E eraser, G paint bucket, I color picker, L line, R rectangle, M move, Ctrl+Z undo, Ctrl+Y redo. With the keyboard on the grid: arrow keys to pick a cell, Space or Enter to draw.

A pixel art maker that runs in your browser

Pixel art is drawing one square at a time: every cell of the grid becomes one pixel of the final image. The style comes from early screens that could only show a handful of dots and colors, and it has grown into an art form of its own, loved for its sharp edges and retro feel.

This pixel art maker works on a computer, tablet or phone, with no account. Nothing is uploaded: your drawing stays on your device and is saved automatically, so it is still there when you come back.

How to draw

  1. Set the “Grid size” from 8 to 128 cells per side, or use the quick buttons 16 × 16, 32 × 32 and 64 × 64, then click “Apply size”.
  2. Pick a color from the “Current palette”, use the “Color” picker, or choose “Transparent”. “Retro palettes” loads a set of 8 or 16 colors, grays or pastels, and “Add to palette” or “Remove from palette” edits it.
  3. Draw with “Pencil” (B), “Eraser” (E), “Paint bucket” (G), “Color picker” (I), “Line” (L), “Rectangle” (R) or “Move” (M). “Mirror left-right” and “Mirror top-bottom” copy every stroke to the other side.
  4. Fix mistakes with “Undo” (Ctrl+Z) and “Redo” (Ctrl+Y), up to 100 steps back.
  5. Choose a “Scale”, then “Download PNG”, “Download SVG” or “Download animated GIF”.

Short on ideas? The “Starter templates” give you a heart, a star, a mushroom and a cat at 16 × 16.

What each tool does, with examples

Line. Lines use Bresenham's algorithm. From cell (0, 0) to cell (7, 3) it colors 8 cells, two on each row. There is no blur or half-tone.

Paint bucket. It fills every same-colored cell connected by an edge, not diagonally. Draw an empty rectangle from (2, 2) to (9, 7): the inside holds 6 × 4 = 24 cells, and one click there reports “24 pixels filled”.

Layers. There are two: “Background” and “Drawing”, with Drawing on top. A layer with “Show” unticked is left out of exported files.

Animation. “New frame” adds an empty frame; “Duplicate frame” copies the current one so you can change a few cells. At 6 “Frames per second”, each GIF frame lasts 0.17 seconds. Tick “Show previous frame faintly” to line up movements and press “Play preview” to watch. Up to 24 frames.

Crisp export. The PNG turns each cell into an exact square block: a 32 × 32 drawing at ×10 becomes a 320 × 320 pixel image with no smoothing at all. The SVG stays sharp at any size, handy for cutting machines and print. The GIF keeps transparency and is capped at 1,024 pixels per side, so a 128-cell grid exports at ×8 at most.

Import. “Import an image” shrinks a picture to the grid without stretching it and rounds colors to 216 shades at most, or to your palette only when “Map the image to the palette colors” is ticked.

What pixel art is used for

  • Icons and favicons: a hand-placed 16 × 16 or 32 × 32 icon stays readable where a shrunk photo turns to mush.
  • Indie games: characters, 16 × 16 tiles for maps, items and short walk cycles.
  • Cross-stitch: one cell is one stitch. A 64 × 64 design on 14-count fabric measures about 4.6 inches across.
  • Fuse beads: one cell is one bead. With 5 mm beads, a 16 × 16 design is 80 mm, a little over 3 inches wide.
  • Colorwork knitting: one cell is one stitch. At a gauge of 22 stitches and 30 rows to 4 inches, a 16 × 16 motif is about 2.9 inches wide and 2.1 inches tall.

Tips for better pixel art

Start with the outline. Draw the silhouette in a dark color, then fill it with the paint bucket. A dark brown or navy outline looks softer than pure black.

Shade with two or three tones. Pick a light source, say top left, add a darker tone on the opposite side and a one or two cell highlight.

Keep the palette small. 8 to 16 colors are plenty, and fewer colors look more unified. For clean slopes, keep the steps even (2-2-2 or 3-3-3) instead of jagged.

Frequently asked questions

Is my drawing saved?

Yes, automatically, in this browser on this device: grid, frames, palette and settings. It is lost if you clear site data or use private browsing, so download a PNG or GIF to keep a copy.

Can I draw with my finger on a phone?

Yes. The grid responds to fingers and styluses without scrolling the page. On a small screen, raise the “Zoom” to make cells bigger.

Why is my exported image so small?

The file size is the grid size times the “Scale”. At ×1, a 16 × 16 drawing is only 16 pixels wide. For sharing, pick ×10 to ×20.

Can I use it without a mouse?

Yes. The keys B, E, G, I, L, R and M switch tools. On the grid, arrow keys move the cursor and Space or Enter applies the tool; for a line or rectangle, the first press sets the start and the second the end.