English
Draw pixel art on a grid, animate frames, and export PNG, GIF, or code.
Last updated
Coddy teaches you by writing real code in your browser - interactive lessons, instant feedback, and AI help when you get stuck.
A pixel art maker is a drawing tool built around a fixed grid: instead of freehand strokes, you place individual pixels one square at a time. That constraint is the whole charm of pixel art - game sprites, retro icons, avatars, and 8-bit style illustrations are all made by choosing every single pixel deliberately.
This editor gives you the classic sprite-editor toolkit: pencil, eraser, flood fill, and a color picker on grids from 8x8 to 64x64, plus frame-by-frame animation with a live preview. Export the result as a crisp PNG at any size, an animated GIF, or a sprite sheet ready for a game engine.
Because this is Coddy, your drawing is also code. One click turns the grid into a Python 2D array, a JavaScript canvas snippet, CSS box-shadow art, an SVG, or a CSV you can open in a spreadsheet - a fun way to see how images really are just arrays of color values.
Start small: 16x16 or 32x32. Small grids force simple, readable shapes - most classic game sprites are 16x16 or 32x32. You can switch sizes later without losing your drawing.
Use the pencil for outlines and the fill tool for large areas. Draw the overall shape first in one color, then add details. Right-click (or the eraser) clears a pixel.
Pick 2 or 3 shades per material - a base, a highlight, and a shadow. The built-in palette is ordered to make those ramps easy to find, and the eyedropper picks up any color already on the canvas.
Duplicate the frame, nudge a few pixels, and press play. Two or three frames are enough for a blink, a bounce, or a flame flicker.
Download a PNG at up to 32x scale, an animated GIF, or a sprite sheet with all frames in a row. Or open the code panel and copy your art as Python, JavaScript, CSS, SVG, or CSV.
Common canvas sizes and export formats - and when to use each.
| Choice | Best for | Notes |
|---|---|---|
| 16x16 grid | Icons, favicons, tiny sprites | The classic sprite size - every pixel counts |
| 32x32 grid | Game characters, avatars | The sweet spot between detail and effort |
| 64x64 grid | Detailed scenes, portraits | Plan the silhouette first - 4,096 pixels fill slowly |
| PNG export | Avatars, stickers, assets | Scale 16x or more so pixels stay sharp |
| GIF export | Animations for chat and web | Uses your FPS setting; transparency supported |
| Sprite sheet | Game engines | All frames side by side in one PNG |
| Code export | Learning, generative art | Python, JavaScript, CSS, SVG, or CSV |
PIXELS = [ [None, "#e43b44", "#e43b44", None], ["#e43b44", "#a22633", "#a22633", "#e43b44"], [None, "#e43b44", "#a22633", None], [None, None, "#e43b44", None],]
for row in PIXELS: print("".join("█" if c else " " for c in row))The code export writes every pixel as a hex color in a nested list, plus a Pillow snippet that renders it back to a PNG. This tiny version prints the shape in the terminal - proof that an image is just a 2D array.
.pixel-art { --px: 12px; width: var(--px); height: var(--px); box-shadow: calc(1 * var(--px)) 0 0 0 #e43b44, calc(2 * var(--px)) 0 0 0 #e43b44, calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}The CSS export turns each pixel into one box-shadow offset of a single div - a classic front-end trick. Paste it into any page and change --px to resize the whole artwork.
,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,
The CSV export puts one hex code per cell. Open it in Google Sheets or Excel, shrink the columns to squares, and add a conditional-formatting rule that colors each cell by its value - instant spreadsheet pixel art.
