Pixel Art Editor

Criar pixel art com um grid-based editor e export as PNG, CSS, ou JSON

Ativo
#000000

Pixel Art Editor

Criar pixel art com um grid-based editor e export as PNG, CSS, ou JSON

Recursos

  • Canvas-based pixel-art editor with 8×8, 16×16, or 32×32 grids
  • Pencil, eraser, paint-bucket (flood fill — now iterative BFS, safe on the 32×32 grid)
  • Configurable 16-color palette plus custom color picker
  • Undo / redo (last 10 states)
  • Export as PNG (scaled), CSS background-image, or JSON data

Como usar

  1. Choose um grid tamanho e selecione um cor de o palette.
  2. Usar o paint ferramenta para clique e drag em o grid para draw.
  3. Export seu creation as PNG, CSS, ou JSON.

Dicas e Melhores Práticas

  • For game sprites, 16×16 is the classic NES era; 32×32 gets you into SNES/Genesis territory.
  • Use grayscale or a tight palette (4-8 colors) for stylistic consistency — full RGB freedom can make pixel art look messy.
  • Flood fill respects the same color across connected cells — useful for backgrounds and large shape blocks.
  • PNG export upscales each pixel into a square block (configurable size) — easier to use as a favicon or game asset.
  • CSS export gives you the data ready to drop into a stylesheet — useful for retro UI accents.

Perguntas Frequentes

What grid sizes are available?

The editor offers three grid sizes: 8x8 for simple icons and sprites, 16x16 for standard pixel art, and 32x32 for more detailed compositions. Changing the grid size will reset the current canvas.

How does the flood fill tool work?

The flood fill tool fills an area of connected cells that share the same color with your currently selected color. Click on any cell and all adjacent cells of the same color will be filled. This is useful for quickly coloring large areas.

What export formats are supported?

You can export as PNG for use as an image file (downloaded automatically), CSS grid code which is copied to your clipboard and can be used directly in web projects, or JSON data which preserves the full grid state for later editing or programmatic use.

How many undo steps are available?

The editor tracks up to 10 undo states. Each time you start a new drawing action (mouse down), the current state is saved. You can step back through these states using the undo button.

Is this tool free and private?

Yes, this tool is completely free with no registration required. All drawing and export happens locally in your browser. No data is sent to any server, and your pixel art remains entirely on your device.

Does the PNG export maintain transparency?

Yes, any cells that are not painted will be transparent in the exported PNG. This makes it easy to create sprites and icons that can be placed on any background. The PNG uses a 16 pixels per cell resolution.