Don't like ads? Go Ad-Free Today 

Pixel Art Canvas & CSS Export

ColorDeveloperImage

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

Canvas Settings

Grid Size

Changing the grid size clears the canvas.

Palette

Preset

Current Color

Export Options

Pixel Size (px)

Size of each pixel in the exported PNG/SVG/CSS output.

Format

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

Pixel Art Canvas & CSS Export

Paint crisp 8-bit style sprites directly in your browser and export them as pure-CSS box-shadow art, scalable SVG, raster PNG, or portable JSON. The canvas scales from 8×8 up to 64×64, ships with classic palettes (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16), and gives you paint, eraser, fill, and eyedropper tools with unlimited undo and redo.

How to Use

Pick a grid size from 8×8 to 64×64. Larger grids give more detail but slower paint speed.
Choose a preset palette or drop any hex colour into the colour picker.
Click the paint, eraser, fill, or eyedropper button in the canvas toolbar — or press P, E, F, I.
Click and drag on the canvas to paint. Use Ctrl+Z and Ctrl+Y to undo and redo.
Pick an export format (CSS box-shadow, SVG, PNG data URI, or JSON), set the pixel size, then copy the code or download the file.

Features

Six grid sizes – 8×8, 16×16, 24×24, 32×32, 48×48, and 64×64 for anything from tiny icons to full sprite sheets.
Seven preset palettes – NES (54 colours), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16, and a grayscale ramp.
Four drawing tools – paint, eraser, paint bucket (flood fill), and eyedropper with single-key shortcuts.
Smooth drag drawing – Bresenham line interpolation keeps strokes continuous even on small screens.
Unlimited undo and redo – 60-step history with Ctrl+Z and Ctrl+Y keyboard shortcuts.
Four export formats – CSS box-shadow, SVG, PNG data URI, and JSON grid data, each with a live 1:1 preview.
Touch support – works on tablets and phones with native touch and pointer events.
Transparent cells – empty pixels stay transparent in every export format, not painted white.

 FAQ

What is a pixel in digital imaging?

A pixel (short for picture element) is the smallest addressable unit of a raster image. Each pixel stores color information — typically red, green, and blue channel values between 0 and 255 — and together a grid of pixels forms a complete image.
How does CSS box-shadow render pixel art?

CSS box-shadow accepts multiple shadow declarations, each with an x offset, y offset, blur radius, spread radius, and color. Setting blur and spread to zero and positioning each shadow on a grid effectively paints individual coloured rectangles from a single 1x1 element — producing a pure-CSS pixel image without any raster data.
What is a limited colour palette and why is it used?

A limited palette restricts an artwork to a small fixed set of colours, often matching the hardware constraints of retro consoles such as the NES, Game Boy, or Commodore 64. Working within a palette creates visual cohesion, evokes a recognisable era, and forces deliberate colour choices instead of arbitrary ones.
What is the flood fill algorithm?

Flood fill is a graphics algorithm that starts at a target cell and spreads outward to every neighbouring cell that shares the same colour, replacing each with a new colour. Most paint-bucket tools use a four-directional flood fill (up, down, left, right) implemented with a stack or queue to avoid deep recursion.
Why are raster and vector pixel art different?

Raster pixel art is stored as a grid of coloured cells (PNG, data URI). Vector pixel art represents each cell as a mathematical shape (SVG or CSS box-shadow) that scales infinitely without losing crispness. Vector output is ideal for web UIs where shape-rendering: crispEdges preserves the blocky look at any zoom level.