Pixel Art Canvas & CSS Export

Draw pixel art directly in your browser on a resizable grid, then export it as ready-to-use code. It's built for developers who want a quick sprite, icon, or CSS-art shape without opening a full image editor — paint with the mouse or a touchscreen, fill regions with a bucket tool, sample colors with an eyedropper, and undo freely, then grab the result as CSS, SVG, PNG, or JSON.

How to use it

1. Pick a grid size (8×8 up to 32×32). Changing it later keeps whatever pixels still fit in the new grid instead of wiping the canvas.
2. Choose a tool: Paint to set a cell to the current color, Erase to clear it, Fill to flood-fill a contiguous region, or Pick to sample a color already on the canvas.
3. Click or drag across the canvas to draw. Undo/Redo step back and forward through your drawing history (up to 50 steps).
4. Pick a color from the palette or the color picker, and use the + button to add the current color to your palette for reuse.
5. Set the pixel size (how large each grid cell becomes in the exported file) and choose an export format, then copy or download the result.

Export formats

• CSS (box-shadow) — the classic single-<div> technique: one element sized to one pixel, with a giant box-shadow listing every painted pixel's offset and color. No image request, no extra markup — just a class you can drop into any stylesheet.
• SVG — one <rect> per painted pixel, with shape-rendering="crispEdges" so scaling never blurs the pixel edges.
• PNG — a data URL rendered at your chosen pixel size, ready to save or paste straight into an <img> src.
• JSON — the raw grid data ({ size, pixels }, a 2D array of hex colors or null for transparent cells), for feeding into your own renderer or build script.

Is my drawing uploaded anywhere?

No. Drawing, undo history, and every export format are generated entirely in your browser — nothing is ever sent to a server.

Why did resizing the grid change my drawing?

Pixels that fit inside the new grid (measured from the top-left corner) are kept; anything outside the new bounds is dropped since there's nowhere for it to go. Sizing up first, then down, is a safe way to preview a change without committing to it, since undo still works across a resize.

Can I use a custom color that's not in the palette?

Yes — set it with the color picker (native swatch or typed hex) and click the + button next to the palette to save it there for reuse. Palette colors can also be removed individually.

If you need a color palette pulled out of an existing image instead of picking one by hand, try the Color Palette Extractor. For hand-tuning the exported SVG further, the SVG Optimizer can shrink it before you ship it.