Pixel Art Maker

What pixel art is and why a grid changes everything

Pixel art is illustration done one square at a time on a deliberately small grid, where every pixel is a conscious decision rather than a smooth gradient. It is the look of classic video games, retro icons, and emoji-style sprites, and the constraint is the point: with only a 16×16 grid to work in, you learn to suggest a shape with a handful of well-placed blocks. This maker gives you a true pixel canvas at three sizes — 8×8, 16×16, or 32×32 — drawn on an HTML canvas with crisp, non-blurred cells and visible grid lines so you always know exactly which square you are editing.

The four tools and what each one does

The fill tool uses a classic flood fill: starting from the cell you click, it spreads outward to every orthogonally connected cell that shares the original colour, stopping at any boundary of a different colour. That is how one click can recolour an entire enclosed area — a sky, a background, the inside of a shape — without touching anything outside it.

A worked example: a simple heart

Switch to the 16×16 grid and pick a red preset. With the pencil, place two small bumps near the top — a few cells each, separated by a one-cell gap — then taper the rows below inward until they meet at a single point at the bottom. That outline alone reads as a heart at small size. Now select the Fill tool and click inside the outline: the whole interior floods red in one action. Want a lighter centre? Pick a pink with the eyedropper-free custom colour input and dab a couple of highlight cells in the upper area. If a stroke goes wrong, Undo steps back through your last changes (up to 20 levels), and Redo brings them back.

Working with colour

You get a fixed palette of 32 presets covering the primaries, secondaries, and a useful range of dark and muted tones — enough to build a coherent sprite without decision paralysis. For anything specific, the Custom colour input opens your system colour picker so you can dial in an exact hex value, and the active-colour swatch always shows what you will paint next. A practical habit from real pixel artists: keep your palette small. Limiting yourself to a handful of colours is what gives pixel art its cohesive, deliberate look — sprawling palettes tend to read as noise at this resolution.

Exporting and the scaling trick

When you click Export PNG, the tool does something important: it does not save the large on-screen canvas with its grid lines. Instead it redraws your art at the true pixel resolution — one image pixel per grid cell — and scales it up by a clean factor (10×) with no smoothing, then downloads it as a PNG. So a 16×16 drawing exports as a sharp 160×160 image where every block stays a perfect square. This matters because if you ever scale a pixel image with normal interpolation it goes blurry; pixel art must always be scaled by whole-number factors with smoothing turned off, which is exactly what the export does. Empty (erased) cells export as white.

Practical tips

• Start at the size you will ship. An icon for a tiny UI badge belongs on the 8×8 or 16×16 grid; detail you add at 32×32 disappears when displayed small.
• Outline first, fill second. Lay down the silhouette with the pencil, then use Fill for the interior — it is far faster than colouring cell by cell.
• Use the eyedropper to stay consistent. Rather than hunting the palette, pick an existing cell's colour to guarantee a match.
• Changing grid size clears the canvas. Switching between 8, 16, and 32 starts fresh, so export before you resize.
• It works on touch. The canvas supports finger drawing on phones and tablets, so you can sketch a sprite on the move.

Common mistakes

• Over-detailing. The temptation at 32×32 is to render every feature; restraint and clear silhouettes read better than busy ones.
• Relying on anti-aliasing. There is none here by design — edges are hard. Suggest curves with stair-stepped cells rather than expecting smoothing.
• Forgetting undo has a limit. History holds your last 20 steps; export periodically if you are working on something you cannot afford to lose.

The entire editor runs in your browser. Nothing is uploaded — your artwork is drawn and exported locally, and the PNG is generated on your own device.