Free tool
Code to Image: Turn a Snippet into a Shareable Picture
Paste a few lines, choose a theme and a background, and save the result as a PNG for a post, a slide or a blog article. Language detection is automatic, and you can mark the lines you want readers to look at.
Background
Your code is drawn in your browser and never sent to a server. The last code and settings you used are kept on your own device so the page can reopen with them, and the share link carries the code after the hash sign in the address.
When a code block will not do
A plain code block is the right choice for a page that people copy from. A picture is the right choice where text cannot be coloured or framed, such as a social post, a slide, a thumbnail or a newsletter. A site owner explaining a small tracking snippet to a team, or a developer posting a fix, often just wants one clear picture of ten lines.
Type or paste into the box. It starts with a short example so the page is never empty, and the picture below updates as you type. The tool colours keywords, strings, numbers, comments, function names, types, tags and keys with its own small colour scheme, so it works without loading any outside library.
The options, one by one
| Option | What you can pick |
|---|---|
| Theme | Night, Violet, Forest, Sand or Paper. The first three are dark and the last two are light |
| Language | Guess, JavaScript and TypeScript, Python, HTML and XML, CSS, JSON, Shell, SQL, C family and Java, Go, Rust, Swift, PHP, Ruby, or plain text |
| Window | Three dots, a plain bar or no bar |
| Text size | Small, medium or large |
| Space around | None, small, medium or large |
| Picture size | 1x, 2x for sharp or 3x for extra sharp |
| Picture shape | Fit the code, 16:9, 1:1 or 4:5 |
| Highlight lines | Numbers such as 2 or 2-4, 7 |
| File name in the bar | Any short text, also used for the saved file name |
| Line numbers | On or off |
The background row lets you choose the colours behind the window.
Three ways to get the picture out
- Download PNG saves the picture at the picture size you chose. The file takes its name from the bar title, or is called code if that is empty.
- Copy image puts a PNG on the clipboard so you can paste it into a chat or a document. If the browser blocks picture copying, the tool says so and suggests the download.
- Copy link builds an address that reopens this exact code with these settings. The code is packed into the part after the hash sign, which a browser does not send to a server when it loads a page.
Pick the 2x size when the picture will be shown on a high resolution screen or shrunk into a column, because the text stays crisper after scaling.
Making a snippet that people can read
- Keep it short. If the picture needs scrolling or tiny text, cut the code to the lines that matter.
- Use highlight lines to point at the change, instead of drawing arrows later.
- Choose a theme with enough contrast for where it will sit. A dark window on a dark post disappears.
- Turn line numbers on when the text refers to them, and off when it does not.
- Check the language. If the guess is wrong, set it yourself, since colours depend on it.
- Never paste secrets. A key or password in a picture is easy to miss and impossible to take back once shared.
The code stays in the box when you return, so remember to clear it before showing the page to anyone else.
Using the picture in website content
On a blog or a documentation page, keep real code as text so search engines and readers can copy it, and use the picture as a social card or a header. Add a text alternative that describes what the snippet does. For help with page speed, large PNGs at 3x can be heavy, so see our notes on website speed optimization for small sites before adding many to one page.
Frequently asked questions
Does it work for any programming language?
It colours many common languages and can guess which one you pasted. For anything else, choose plain text, and the picture will have the frame without syntax colours.
How do I highlight specific lines?
Type line numbers in the highlight box, separated by commas, and use a hyphen for a range, like 2-4, 7. Those lines get a band and a marker on the left, and the other lines fade back.
What size is the saved PNG?
That depends on your text size, spacing and the picture size menu. Choosing 2x or 3x makes the picture larger and sharper.
Is my code sent anywhere?
No. The picture is drawn in your browser. The link option stores the code inside the address itself, after the hash sign, and does not send it to a server.
Why does the page still show my last snippet?
The tool remembers the last code and settings on your device. Clear the box to start fresh.
Can I put a file name in the window bar?
Yes. Type it in the file name field and it shows in the bar. It is also used as the name of the saved PNG.
More free tools
- Mockup generator: Put a screenshot into a browser, phone, tablet or laptop frame on a gradient background.
- JSON formatter: Format, minify, validate and repair JSON, browse it as a tree, or convert it to YAML or CSV.
- HTML viewer: Preview pasted HTML live at phone, tablet and laptop widths, with a console, format and minify.
- Diff checker: Compare two texts or files side by side, merge changes and export a diff.
- CSS gradient generator: Build linear, radial and conic CSS gradients with colour stops and copy CSS or a Tailwind class.