How is this different from Carbon or ray.so?

The result is similar — code rendered inside a window frame on a background — but everything is rendered locally in your browser with no server round-trip, it handles CJK comments properly, and you can export SVG as well as PNG.

The language was detected wrong. What now?

Detection scores keywords and syntax patterns, so very short snippets can be ambiguous. Just pick the right language from the Language menu and the highlighting updates instantly.

How do I get a sharper image?

Set the export scale to 2x or 4x to multiply the resolution — ideal for retina screens, slides and print. For infinitely scalable output, use SVG. Very long code is automatically exported at a lower scale to stay within the browser’s canvas size limit.

Why does the SVG font look different on another computer?

The SVG uses a monospace font stack (SF Mono, Menlo, Consolas and so on). On a device without those fonts, the system’s default monospace font is used, so spacing may differ slightly. Use PNG when you need a pixel-exact result.

🧑‍💻

🧑‍💻Code to Image - Beautiful Carbon-Style Code Screenshots

Screenshots of your editor rarely look good in slides, blog posts or social media. Paste your code here and the tool detects the language and highlights it — JavaScript, TypeScript, Python, Go, Java, C, C++, Rust, SQL, HTML, CSS, JSON, Bash and YAML — with a live preview of a polished window-style image. Pick from 10 dark and light themes such as Dracula, One Dark, Monokai, Nord, GitHub, Night Owl and Solarized, choose macOS traffic lights or a Windows title bar, add a file name as the title, toggle line numbers and set the starting line, and adjust font size, padding, corner radius and drop shadow. The background can be one of 10 gradients, any solid color or transparent. Width can fit the longest line or stay fixed, wrapping long lines. Export PNG at 1x, 2x or 4x for retina screens and print, export a vector SVG, or copy the image straight to the clipboard. Non-Latin comments and emoji render correctly. Everything runs in your browser; your code is never uploaded.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Code Screenshot

1Paste code into the editor — the language is detected automatically (or pick it)
2Choose a theme, window style, background, font size and padding with a live preview
3Pick a scale and download PNG, download SVG or copy the image

FAQ

How is this different from Carbon or ray.so?: The result is similar — code rendered inside a window frame on a background — but everything is rendered locally in your browser with no server round-trip, it handles CJK comments properly, and you can export SVG as well as PNG.
The language was detected wrong. What now?: Detection scores keywords and syntax patterns, so very short snippets can be ambiguous. Just pick the right language from the Language menu and the highlighting updates instantly.
How do I get a sharper image?: Set the export scale to 2x or 4x to multiply the resolution — ideal for retina screens, slides and print. For infinitely scalable output, use SVG. Very long code is automatically exported at a lower scale to stay within the browser’s canvas size limit.
Why does the SVG font look different on another computer?: The SVG uses a monospace font stack (SF Mono, Menlo, Consolas and so on). On a device without those fonts, the system’s default monospace font is used, so spacing may differ slightly. Use PNG when you need a pixel-exact result.