Code Image Generator

Make your code look great

From snippet to image in three steps

Paste your code into the editor on the left — the stage on the right re-renders the finished card as you type. Then use the style panel to shape the result: choose a syntax theme, toggle the window frame, pick a gradient or transparent background, and adjust the padding and corner radius until the composition feels balanced. Finally, click Download PNG for a file or Copy image to place it straight on your clipboard, ready to paste into a post, a Slack thread or a slide deck.

Tips for code screenshots people can actually read

A few habits separate a crisp code card from an illegible one. Keep lines short — around 60–70 characters — so the type stays large after social platforms scale the image down; if a line wraps in the preview, it will look cramped in the export. Trim the snippet to the one idea you are showing rather than the whole file: ten focused lines communicate more than fifty scrolled ones. Choose a high-contrast theme for feeds that are viewed on phones in daylight, and leave generous padding so the gradient frames the code instead of crowding it. The export is rendered at 2× resolution, so text stays sharp on retina displays and in zoomed-in slides.

One accessibility habit worth keeping

An image of code is invisible to screen readers and impossible to copy-paste. When you post one, include the snippet as plain text in the same thread, gist or alt text — your image draws the attention, the text makes it usable. This also helps people who find your post through search, since the code inside a PNG can't be indexed.

Every control in the style panel, explained

The Theme dropdown offers five palettes: Midnight (a deep navy with pastel keywords), Dracula, GitHub Dark, Solarized and Paper — the only light theme, which suits printed handouts and white-background blog posts. Background is a row of swatches: six colour gradients, one near-black gradient for an understated look, and a checkerboard swatch that means transparent. Window title sets the text centred in the title bar; use a filename like api/routes.ts so readers know where the snippet lives, or clear it to hide the label. The Window buttons checkbox toggles the three macOS-style dots; unticking it and clearing the title removes the bar entirely for a minimal card.

Three sliders finish the layout. Padding (0–96 px) controls the coloured margin around the card — 48 px is the default, and 0 px produces an edge-to-edge export with no visible background. Corner radius (0–24 px) rounds the card itself. Font size (11–22 px) scales the code; 15 px is the default, and 17–18 px is a sensible choice for content that will be viewed on phones. The card's width grows with your longest line up to 760 px, after which long lines scroll out of view in the preview and are cut off in the export, so wrap or shorten them first.

Real-world use cases

• Announcing a library release on social media. Paste the three-line "before and after" usage example, pick a gradient that matches your brand colour, and post the PNG with the same snippet as plain text in a reply. Image posts get more reach; the text reply keeps it copyable.
• Slide decks. Choose the transparent background, set padding to 0 and export. The resulting card drops cleanly onto any slide background, and the 2× resolution stays sharp on a projector or a 4K display.
• Bug reports and internal docs. When a chat tool mangles indentation or strips syntax colours, a code image preserves both. Set the window title to the file path and line number so reviewers can jump straight to the source.
• Teaching material. Use the Paper theme and a large font for worksheets and printed quizzes; light backgrounds print without draining toner and keep contrast high on paper.

How the export works under the hood

The generator has no server and no image library. The preview you see is ordinary HTML: a flex title bar and a <pre> element whose tokens are wrapped in coloured <span>s by a small regex-based highlighter that recognises comments, strings, keywords, numbers and function calls across C-like and Python-like syntaxes. When you click Download PNG or Copy image, that DOM node is cloned, serialised to XHTML and embedded in an SVG <foreignObject> sized to the card's on-screen dimensions. The SVG is loaded into an Image, drawn onto a <canvas> scaled by a factor of two, and the canvas is encoded as a PNG blob — either saved as code.png or handed to the asynchronous Clipboard API.

Two practical consequences follow from that design. First, because the browser rasterises the SVG with the fonts it already has loaded, JetBrains Mono is used when available and the system monospace font otherwise; the export matches what you see on the stage. Second, extremely long snippets can exceed the browser's maximum canvas size, which is why the tool shows "Export failed — try a smaller snippet" rather than producing a blank image. If that happens, split the code into two cards or lower the font size and padding.

Further reading

Wondering whether PNG is the right format for your screenshot, or whether to convert it to WebP before publishing? See WebP vs AVIF vs PNG vs JPG. If you would rather embed code as scalable vector graphics, the SVG optimization guide explains how to keep the file small. Browse all guides for more.

Frequently asked questions