Code Screenshot Generator
Paste code and generate a beautifully styled, syntax-highlighted screenshot — choose a theme, background, window chrome and line numbers, then export it as a PNG image.
Input
Optional filename shown in the title bar.
Screenshot preview
Your code screenshot will appear here…
Everything renders in your browser — your code is never uploaded anywhere.
Guides
Turn a snippet of code into a polished, shareable image — the kind you'd post to Twitter/X, drop into a slide deck, or paste into a README. Paste your code, pick a syntax theme and background, and the tool renders a "screenshot" you can download as a PNG.
How to use it
- Paste or type your code into the input box.
- Pick a language (or leave it on Auto-detect, which guesses from common syntax patterns) so the syntax highlighter knows how to color it.
- Choose a syntax theme — a mix of popular dark themes (Monokai, Dracula, GitHub Dark, One Dark, VS Code Dark+, Nord, Night Owl, Tokyo Night) and light ones (GitHub Light, One Light, Solarized Light, VS Code Light+).
- Pick a background — eight gradients, solid white or black, or transparent (for dropping the screenshot onto your own background later).
- Style the window chrome: macOS traffic lights, a Windows-style title bar, or no chrome at all — with an optional window title (e.g.
main.js). - Toggle line numbers and a drop shadow, and fine-tune the background padding, code font size, and window corner radius with the sliders.
- Click Download PNG to save the image, or Copy image to put it straight on your clipboard (in browsers that support copying images).
The preview updates live as you type or change any setting, so you can see exactly what you're about to export.
Privacy
Everything happens in your browser — the code you paste is never uploaded to a server. Highlighting and image rendering both run locally, so you can safely screenshot code that isn't meant to be shared as plain text (just don't lose sight of the fact that anything you export as an image is, of course, shareable).
Why doesn't Auto-detect always get it right?
Auto-detect uses a lightweight set of syntax heuristics (keywords, punctuation patterns, common idioms) rather than actually compiling or parsing your code, so very short snippets or languages with overlapping syntax (say, a few lines of C vs. C++) can occasionally be guessed wrong. If that happens, just pick the language from the dropdown instead — highlighting always uses whatever language is selected.
Can I get a transparent background?
Yes — choose Transparent from the background swatches. The exported PNG will have no fill behind the code window, so it composites cleanly onto slides, dark or light pages, or any other background.