ASCII Art Generator

About this tool

Two modes: turn a short line of text into a large blocky banner, or convert an uploaded image into ASCII art. Both work by drawing to an off-screen canvas, sampling the brightness of each cell, and mapping that brightness to a character — everything happens in your browser and no image is uploaded.

How image-to-ASCII works. The image is scaled down to the width you set (in characters), then each pixel's brightness is measured and matched to a "ramp" of characters ordered from light to dark — something like  .:-=+*#%@. A bright pixel becomes a space or a dot; a dark pixel becomes @ or #. Because monospace characters are taller than they are wide (roughly 2:1), the tool samples fewer rows than columns so the output isn't vertically stretched.

The width setting is resolution. More characters across means more detail, at the cost of a bigger block of text. A portrait might need 100–150 characters wide to be recognisable; a simple logo or icon can work at 40–60. For a text banner, too narrow a width squashes the letters together until they're unreadable.

When to use Invert. The default assumes dark shapes on a light background (black text on white, a dark logo on transparent). If your source is the opposite — white text on black, a bright subject on a dark sky — the result will look like a photographic negative. Tick Invert to swap the mapping.

What makes a good source image. High contrast and a clear subject. ASCII art only has about ten brightness levels to work with, so subtle gradients, busy backgrounds, and low-contrast photos turn to mush. Line art, silhouettes, logos, and portraits with strong lighting convert best. Cropping tight to the subject before uploading helps a lot.

Displaying the result. ASCII art only lines up in a monospace font. Pasting it into a proportional font (most word processors, chat apps, social posts) will distort it. Keep it in a code block, a <pre> tag, a terminal, or a monospace editor. Email signatures and code comments are classic homes for it.

For a text-only figlet-style banner you can also reuse the Morse code translator for a different retro text effect, or the fancy text generator for Unicode styled text that survives proportional fonts.

Frequently asked questions

Why does the output look better at a wider "width" setting?

Width is effectively resolution. More characters across captures finer detail; too few and a text banner's letters run together or an image loses its shape.

When should I use "Invert"?

The default maps dark areas to dense characters and light areas to spaces — right for dark-on-light sources. If your image is light content on a dark background, or the result looks like a negative, turn Invert on.

Does this work well for photos?

Only high-contrast photos with a clear subject. ASCII art has roughly ten brightness levels, so gradients and busy, low-contrast images come out muddy. Line art and silhouettes work best.

The art looks scrambled when I paste it somewhere — why?

ASCII art needs a monospace font to align. Proportional fonts (used by most chat apps, docs, and social sites) give every character a different width and break the picture. Keep it in a code block or a <pre> element.

Is my image uploaded?

No. The image is read and processed on a canvas in your browser; nothing is sent to a server.

Why is the image output not as wide as my screen?

The character width is capped so very large outputs stay usable. For more detail, raise the width slider and view the result in full screen.