Code Screenshot Generator
Turn any code snippet into a shareable screenshot with syntax highlighting, themes and a gradient background.
Paste some code above to generate a screenshot.
Highlighting: JavaScript · 0 lines · 0 × 0 px PNG
How it works
Paste a snippet and the code screenshot generator draws a shareable image of it on an HTML canvas: a rounded window card with optional traffic-light title bar, line numbers and syntax highlighting, sitting on a gradient background. Everything re-renders instantly while you type or drag a slider, so you can dial in the padding and font size and see the exact pixel size of the PNG you are about to export.
Highlighting is done by a small tokenizer built into the page — it recognises JavaScript, TypeScript, Python, JSON, HTML, CSS, SQL and shell scripts, and auto-detects the language from the snippet unless you pick one yourself. Long lines wrap instead of being cut off, so nothing disappears off the edge of the image. Use Copy image to paste the screenshot straight into Slack, a pull request or a slide deck, or Download PNG to save it at 2× resolution for crisp text on retina screens. Unlike hosted code-image services, your snippet is never uploaded: the tokenizer and the canvas both run in your own browser, which makes this safe for proprietary or unreleased code.
Frequently asked questions
How do I turn code into an image?
Paste your snippet into the box and the screenshot is drawn instantly. Pick a theme and a gradient background, set the padding and font size, then use Download PNG to save the image or Copy image to paste it straight into Slack, a pull request or a slide deck.
Is my code uploaded anywhere?
No. The syntax highlighter and the image renderer both run in your own browser using JavaScript and the HTML canvas. Nothing is sent to a server and nothing is stored, so it is safe to use for proprietary or unreleased code.
Which programming languages does the syntax highlighting support?
JavaScript, TypeScript, Python, JSON, HTML, CSS, SQL and shell scripts, plus a plain-text mode. The language is auto-detected from your snippet and shown under the preview, and you can override it from the Language dropdown at any time.