📸

Code Screenshot Generator

Auto-saved

Language

Theme

Window Frame

Background

Font

Font Size — 14px

Padding — 32px

Export Scale

Line numbersLine wrap

Title (optional)

Code Input

function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

greet("World");

Preview

1function greet(name) {
2  const message = `Hello, ${name}!`;
3  console.log(message);
4  return message;
5}
6
7greet("World");

Related Tools

See all ->

Diff CheckerCompare text & code

JavaScript MinifierConcatenate, uglify & compress

SQL FormatterBeautify & minify SQL

JSON FormatterFormat & validate

HTML FormatterPrettify HTML, CSS & JS

Word CounterReadability & keywords

AI Prompt StudioScore, fix & optimize prompts

Markdown EditorLive preview & GFM export

Code Screenshot Generator — Create Beautiful Code Images Online

Updated May 14, 2026

Share & Support

What's included

Features

9 professional themes: One Dark, Dracula, GitHub Dark, Monokai, Nord, Tokyo Night, GitHub Light, Solarized Dark, Night Owl

Syntax highlighting for 20+ languages: JS, TS, Python, HTML, CSS, JSON, SQL, Go, Rust, Java, C, C++, C#, Bash, PHP, Ruby, Swift, Kotlin, YAML and more; format JSON before screenshotting with our JSON Formatter

Window frame styles: macOS (traffic lights), Windows title bar, Terminal, or no frame

10 gradient backgrounds plus solid color picker with full hex control; create mesh gradient backgrounds with our Mesh Gradient Generator

Toggle line numbers on/off for clean or annotated screenshots

Adjustable font size (10–22px) and padding (8–80px) for perfect framing

Choose from JetBrains Mono, Fira Code, Source Code Pro, Cascadia Code, and more

Export at 1×, 2× or 3× pixel density for crisp Retina/HiDPI images; compress the PNG with our Image Compressor

Optional file title in the window chrome for realistic editor screenshots

Line wrap toggle for long lines or narrow export widths

Copy image to clipboard with one click — paste directly into Slack, Notion, or Figma

Download as PNG — no watermark, no sign-up, no file size limits

About this tool

Turn Any Code Snippet into a Beautiful Shareable Image — Free Carbon.now.sh Alternative

Runs in your browser

No install or signup

Free forever

You pasted code into a tweet and the formatting disappeared. You're writing a dev blog post and a raw code block looks flat next to your screenshots. You need a slide with a readable snippet but PowerPoint butchers the spacing. Paste the code here, pick a theme, and download a crisp PNG in under 10 seconds — no sign-up, no watermark.

This converter applies professional syntax highlighting across 22 languages — JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, Go, Rust, Java, Bash, and more. Each token (keywords, strings, functions, comments, operators) is colored precisely to match the theme you choose. Nine themes available: One Dark, Dracula, GitHub Dark, Monokai, Nord, Tokyo Night, GitHub Light, Solarized Dark, and Night Owl. Add a macOS, Windows, or Terminal window frame. Set a gradient or solid background. Export at 1×, 2×, or 3× scale for Retina-quality results.

Everything runs entirely in your browser — your code never leaves your device. It's a privacy-first Carbon.now.sh alternative with a faster interface, more themes, and instant downloads with no upload required.

Step by step

How to Use

Step 1 — Paste your code. Click into the "Code Input" textarea and paste any code snippet. You can also type directly. The preview updates in real time as you type.

Step 2 — Select the language. Use the Language dropdown to tell the highlighter what language your code is. Correct language selection dramatically improves highlighting accuracy — pick from JavaScript, TypeScript, Python, HTML, CSS, SQL, Go, Rust, Java, Bash, and 13 more.

Step 3 — Choose a theme. Click any theme tile in the sidebar. Nine themes are available — from dark workhorses like One Dark and Dracula to light options like GitHub Light. The preview updates instantly so you can compare themes without clicking elsewhere.

Step 4 — Pick a window frame. Select macOS for the classic colored dot chrome, Windows for a title-bar style, Terminal for a minimal prompt header, or None for a fully frameless card. Optionally set a title (like index.js or main.py) to show in the window chrome.

Step 5 — Set your background. Switch between Gradient and Solid in the Background section. Ten preset gradients are available — Midnight, Ocean, Sunset, Aurora, Rose, Dusk, Forest, Amber, Slate, and Transparent. For solid color, use the color picker to choose any hex color.

Step 6 — Fine-tune typography and padding. Drag the Font Size slider (10–22px) and Padding slider (8–80px) to frame your code perfectly. Switch the font between JetBrains Mono, Fira Code, Source Code Pro, Cascadia Code, or Inconsolata.

Step 7 — Set export resolution. Choose 1×, 2×, or 3× scale for the download. Use 2× or 3× for Retina displays and high-quality social media posts. 1× is sufficient for small in-line uses.

Step 8 — Export. Click "↓ Download PNG" to save a crisp PNG file directly to your computer. Or click "Copy Image" to put the image on your clipboard and paste it straight into Slack, Twitter, Notion, Figma, or any image-accepting app.

Real-world uses

Common Use Cases

🐦

Share a code snippet on Twitter/X or LinkedIn without losing formatting

Paste into a tweet as an image instead of plain text — syntax highlighting is preserved and the code is readable at any size.

✍️

Add a polished code image to a blog post or tutorial

Plain code blocks in Markdown look fine, but a styled screenshot with the right theme and padding looks intentional. Export at 2× or 3× for sharp rendering on Retina screens.

🎤

Create a readable code slide for a conference talk or meetup

Paste the snippet, set a large font size and generous padding, and export a clean image. No more copying a PowerPoint screenshot that blurs the indentation.

💬

Post a code review example in Slack or Discord with full syntax coloring

Paste the image directly into Slack using Copy Image — no upload step, just Ctrl+V.

🗂️

Add a highlighted code example to a GitHub README or portfolio

Use the 2× or 3× export for sharp rendering in GitHub's markdown preview and on portfolio sites.

🎬

Generate a code image for a YouTube thumbnail or course material

Export at 3× scale for the highest quality. The wide padding and gradient background options match standard thumbnail aspect ratios well.

📰

Create consistent branded code visuals for a developer newsletter

Use the same theme and gradient for every issue to create visual consistency across emails and social content.

📖

Show API usage or CLI commands in product documentation

A styled screenshot is faster to embed in a doc than configuring a code block plugin — and it renders consistently across every documentation platform. Generate the meta tags for that doc page with our Meta Tag Generator.

Got questions?

Frequently Asked Questions

Yes — this tool covers all the core Carbon features (themes, languages, window frames, gradient backgrounds, PNG download) with a privacy-first approach. All processing runs entirely in your browser. Your code is never uploaded to any server, never stored, and never logged. It works fully offline once the page has loaded.

Paste your code, select the language, choose a theme (One Dark and Dracula are popular for social sharing), set a gradient background, and click Download PNG. For Retina-quality output that looks sharp on social media, set Export Scale to 2× or 3× before downloading.

JavaScript, TypeScript, JSX, TSX, Python, HTML, CSS, JSON, Bash, SQL, Java, C, C++, C#, Go, Rust, Ruby, PHP, Swift, Kotlin, YAML, and Plain Text — 22 languages total.

Nine professionally calibrated themes: One Dark, Dracula, GitHub Dark, Monokai, Nord, Tokyo Night, GitHub Light, Solarized Dark, and Night Owl. The preview updates instantly when you switch themes so you can compare without any delay.

Set Export Scale to 2× or 3× before downloading. This produces a PNG that is 2× or 3× the pixel dimensions of the on-screen preview — sharp on Retina displays and high-quality enough for social media and video thumbnails.

Click the Copy Image button. On Chrome, Edge, and modern Safari the image is placed on your clipboard and you can paste it directly into Slack, Notion, Figma, Twitter, or any app that accepts pasted images — no download needed.

Yes. In the Background section, select Gradient, then choose the Transparent chip (the checkered tile). The downloaded PNG will have a transparent background, useful for placing the code card on any colored surface in a presentation or design tool.

macOS shows three colored traffic-light buttons (red, yellow, green) at the top left. Windows shows a title bar with minimize/maximize/close icons at the top right. Terminal shows a minimal prompt-style header. None removes all chrome and shows just the code card.

JetBrains Mono, Fira Code, Source Code Pro, Cascadia Code, Inconsolata, and the system default monospace — six options covering the most popular programming fonts for readability.

This tool uses a lightweight browser-side tokenizer for fast, zero-dependency operation. It covers the most common token types accurately. Full fidelity to a specific editor theme would require bundling TextMate grammar files, which would significantly increase page load time.