Pixel Art Generator

Draw pixel art on a customizable grid right in your browser — pick colors, paint, erase, fill, and export your creation to PNG, SVG, or CSS box-shadow. No upload, no signup.

Grid size

Color

Tool

Pixel size (px)

Output

About the Pixel Art Generator

This pixel art generator runs entirely in your browser. Choose a grid size, pick a color, and start painting on the canvas. You can switch between paint, erase, fill (bucket), and eyedropper tools. When you're done, export your artwork as a PNG image, an SVG file, or CSS box-shadow code for use directly in web pages. Nothing is uploaded — all drawing happens locally with JavaScript and Canvas.

Tools explained

Paint — Click or drag on the grid to fill pixels with the selected color.
Erase — Click or drag to remove pixels, making them transparent.
Fill — Click a region to flood-fill all connected pixels of the same color.
Eyedropper — Click a pixel to copy its color into the color picker.

Export formats

PNG — A raster image with transparency. Downloaded directly to your device.
SVG — A vector image made of rectangles, scalable to any size without quality loss.
CSS box-shadow — A single CSS rule using multiple box-shadows to reproduce the pixel art with pure CSS — great for lightweight web graphics.

How to use

Select a grid size (8×8 up to 32×32).
Pick a color and choose the Paint tool.
Click and drag on the canvas to draw. Use Erase to fix mistakes, Fill for large areas, and Eyedropper to reuse colors.
Click Undo to revert the last action, or Clear to start over.
Click an export button to download PNG or generate SVG/CSS code in the output box.

Frequently asked questions

Does this tool upload my art? No. All drawing and exporting happens locally in your browser. Your artwork never leaves your device.

What's the maximum grid size? 32×32, which is plenty for icons and game sprites. Larger grids would be harder to edit on small screens.

Does it support transparency? Yes. Erased pixels are transparent and preserved in PNG and SVG exports.

How does the CSS box-shadow export work? Each filled pixel becomes a box-shadow entry offset by its grid position, so a single HTML element with one CSS rule renders the entire image.