Code to Image
Turn a code snippet into a syntax-highlighted image in your browser, with 20+ languages, custom themes and backgrounds, line numbers, and PNG or SVG export.
Code to Image — Paste a snippet, pick its language (or let auto-detect choose), and style a Carbon-style code card with a theme, a gradient, solid, custom, or transparent background, an adjustable monospace font, line numbers, and an editable window title. Export it as a PNG at 1x–3x scale or as an SVG, or copy the image straight to your clipboard. Syntax highlighting (Prism) and the image capture (html-to-image) run entirely in your browser, so your code is never uploaded.
What is Code to Image?
Code to Image is a free, browser-based tool that turns a code snippet into a shareable picture — a styled, syntax-highlighted code card for a blog post, slide deck, README, or social post. It highlights over 20 languages, including JavaScript, TypeScript, Python, Go, Rust, Java, SQL and more, with an optional auto-detect that guesses the language from your code. Dress the card with one of seven themes, a preset gradient, a custom color or gradient, or a transparent background, then fine-tune the monospace font, font size, padding, line numbers, window title, and output width. The card renders live as you edit, and you can export it as a PNG at 1x, 2x, or 3x, save it as an SVG, or copy it to the clipboard.
How to use Code to Image
- Paste or type your code, or connect another tool's text output to the input port in the workspace.
- Pick the matching language, or turn on Auto-detect in Settings to have the tool guess it from your code.
- Choose a theme and a background — a preset gradient, a custom solid color or gradient, or transparent — in Settings.
- Fine-tune the monospace font, font size, padding, line numbers, window title, and output width to taste.
- Watch the live preview update as you edit; click it to enlarge it in the zoom view.
- Export the card as a PNG at 1x–3x, download it as an SVG, or copy the image to your clipboard.
Examples
A Go snippet with line numbers
Paste a Go function, turn on Auto-detect so the language is picked for you, enable line numbers, choose the Nord theme, and export a 2x PNG for a tutorial.
A branded card with a custom gradient
Set the background to Custom gradient, pick your brand's two colors and an angle, add a window title like app.tsx, and copy the image straight to your clipboard.
A scalable SVG for docs
Choose the Snow light theme, set the output width, and download an SVG so the code card stays crisp at any size in your documentation.
Frequently asked questions
- Which languages can it highlight?
- Over 20, including JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift, and GraphQL. Pick one from the dropdown, or turn on Auto-detect to have the language guessed from your code.
- What can I export, and at what quality?
- Export a PNG at 1x, 2x, or 3x pixel density, save a vector SVG, or copy the image straight to your clipboard. Choosing the Transparent background keeps an alpha channel with no backdrop behind the card.
- Can I change the look of the card?
- Yes. Switch between seven themes, choose a preset gradient, a custom solid color or gradient, or a transparent background, and adjust the monospace font, font size, padding, line numbers, editable window title, and output width.
- Is my code uploaded anywhere?
- No. Both the syntax highlighting (Prism) and the image capture (html-to-image) run 100% client-side in your browser. Your code is never uploaded, sent to our servers, or shared, so even proprietary snippets stay on your device.
- Why doesn't the image appear until I click Download on the tool page?
- On the standalone page the PNG is rendered when you press Download, Copy image, or Download SVG, so typing doesn't re-capture the image on every keystroke. The styled preview still updates live; in the workspace the PNG rebuilds automatically so it can flow to the next tool.
Related tools
Color Contrast Checker
Check the WCAG 2.1 contrast ratio and APCA Lc score between text and background colors, see AA, AAA and 3:1 badges, and apply the nearest passing color.
Color Mixer
Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.
Color Shades Generator
Turn one base HEX color into a perceptual OKLCH, HSL, or RGB shade scale with adjustable stops, WCAG contrast hints, and CSS, Tailwind, and JSON export.
Colorblind Simulator
Upload an image and preview how it looks with protanopia, deuteranopia, tritanopia, or full color blindness, then download the simulated result.