💻 Code to Image
Turn any code snippet into a beautiful, shareable image — with syntax highlighting, a clean window frame and a gradient background. Perfect for X, blog posts, docs and slides. Runs 100% in your browser, private, free, no watermark.
🔒 Private · Free · No watermarkHow to use 💻 Code to Image
- 1. Paste your code into the text box, choose a language or leave Auto-detect, and optionally add a filename such as app.js for the window title.
- 2. Pick a gradient Background or None for transparency, then adjust Padding and Font size with the sliders.
- 3. Toggle Line numbers and macOS window dots to match the look you want; the preview updates as you type.
- 4. Click ⬇ Download PNG to save a double-resolution image ready for X, blog posts, docs or slides.
Frequently asked questions
Is Code to Image free to use, and is there a watermark?
Yes, it’s free, with no account and no watermark on the PNG. There’s no fixed line limit, but very long files make a very tall image, so for social posts it helps to share a focused snippet of 10 to 40 lines.
Is my code uploaded when I create a code screenshot?
No. Highlighting and image rendering run in your browser, and your code isn’t sent to our server. The highlight.js and html2canvas libraries load from a public CDN, and your last snippet and settings are saved in this browser’s local storage so they’re still there next time.
How do I make a code screenshot for Twitter or X?
Paste a short snippet, pick a colorful gradient background, keep macOS window dots on and set Font size around 15 to 18 so it’s readable on phones. Download the PNG and attach it to your post; consider pasting the code as text in a reply for accessibility.
Which programming languages does Code to Image highlight?
You can choose JavaScript, TypeScript, Python, HTML, XML, CSS, JSON, Bash, SQL, Java, Go, Rust, PHP, Ruby, C, C++, C#, Kotlin, Swift, YAML or Markdown, or use Auto-detect, which guesses the language from the code. Syntax colors use the Atom One Dark theme.
Can I export a code image with a transparent background?
Yes. Choose the None background swatch and the area around the code window is transparent in the downloaded PNG. The code window itself keeps its dark background so the syntax colors stay readable on any slide or page.
What resolution is the downloaded code image?
The PNG is rendered at twice the on-screen size, so text stays crisp on high-density displays and when platforms compress the image. Its exact dimensions depend on your code length, font size and padding.