About the Code Screenshot Generator
This code screenshot generator turns any snippet into a clean, syntax-highlighted image you can drop into a tweet, slide deck, blog post, README or documentation. Paste your code, choose the language and a colour theme, add a window frame with a file name and a gradient background, and download a sharp PNG at 1×, 2× or 3× resolution for retina screens.
It works as a free, lightweight alternative to tools such as Carbon: highlighting supports JavaScript, TypeScript, Python, Go, Rust, SQL, shell, CSS, HTML and JSON, and you control the font size, padding and line numbers. The page shows the exact pixel dimensions of the image before you export, which helps when a platform has size limits.
Everything is drawn on a canvas inside your browser — your code is never uploaded. Tabs are converted to four spaces, and very long snippets are trimmed to 300 lines of up to 200 characters so the image stays readable.
How to use the code screenshot generator
- 1Paste your code into the box.
- 2Choose the language so keywords, strings and comments are coloured correctly.
- 3Pick a theme, background and whether to show the window frame and line numbers.
- 4Adjust the font size, padding and export resolution.
- 5Click Download PNG, or Copy image to paste it straight into a chat or document.
Formula and method
The snippet is laid out on a monospace grid. Each character cell is 0.6 × the font size wide and each line is 1.5 × the font size tall, so the code area is the longest line × cell width by the number of lines × line height. The card adds 20 px of inner padding on every side, a 40 px title bar when the window frame is on, and a line-number gutter two characters wider than the largest line number.
The outer padding is the coloured background around the card, and the whole image is multiplied by the export scale (2× doubles both dimensions for crisp display on high-density screens). Syntax highlighting is a lightweight tokenizer that recognises comments, strings, numbers, keywords, function calls and type names for each language.
- f
- Font size in pixels
- cols
- Characters in the longest line (tabs = 4 spaces)
- pad
- Outer background padding
- scale
- Export resolution multiplier (1×, 2× or 3×)
Worked examples
Default JavaScript snippet at 2×
The longest line is 36 characters at 14 px × 0.6 = 8.4 px each, so the card is 40 + 302.4 → 343 px wide; 10 lines × 21 px + 40 px frame + 40 px inner padding = 290 px tall. Adding 48 px of background on each side (439 × 386) and doubling for retina gives 878 × 772 px.
Python with line numbers at 1×
Five lines of up to 28 characters: 28 × 8.4 = 235.2 px of code, plus a 3-character line-number gutter (25.2 px) and 40 px of inner padding, rounds up to a 301 px card. Without a frame the card is 5 × 21 + 40 = 145 px tall, and 32 px of background on each side makes the PNG 365 × 209 px.
Large font for a slide
At 24 px each character is 14.4 px wide and each line 36 px tall. 36 × 14.4 + 40 = 558.4 → 559 px card width plus 128 px padding = 687 px; 10 × 36 + 40 + 40 = 440 px card height plus 128 px = 568 px.
Frequently asked questions
How do I make an image of my code?+
Paste the code above, choose its language, theme and background, then click Download PNG. The image is generated in your browser at up to 3× resolution, ready for social media, slides or documentation.
Is this a free alternative to Carbon?+
Yes. It covers the common Carbon workflow — syntax-highlighted code in a window frame on a gradient background exported as PNG — without an account, and your code never leaves your device.
What resolution should I export code screenshots at?+
Use 2× for most uses: it stays sharp on retina phones and laptops while keeping files small. Choose 3× for print or large presentation screens, and 1× when a platform has strict pixel limits.
Should I share code as an image or as text?+
Images are great for social posts and slides because formatting is preserved, but they are not searchable, copyable or accessible to screen readers. Always include the code as text or a link in documentation and add alt text to the image.
Why is my long line cut off?+
To keep images readable, lines are trimmed at 200 characters and snippets at 300 lines. Reformat long lines (most style guides suggest 80–100 characters) before generating the screenshot.