Code to Image Converter

Create shareable images of your code.

Font size: 15 px

Background

Transparent

Padding: 64 px

Corner radius: 12 px

Shadow: 40

Code to Image Converter

Create beautiful images of your source code for X / Twitter, LinkedIn, blog posts, slides and documentation. Paste a snippet, choose a language and a color theme, and download a syntax-highlighted PNG inside a macOS-style window on a gradient background — the same look made popular by tools like Carbon and ray.so, but fully private and running in your browser.

Why share code as an image?

Code pasted into social media loses its indentation and colors, and long lines wrap unpredictably. An image keeps monospace alignment, syntax colors and your chosen font size, so the snippet reads exactly the way you wrote it. Images also get more attention in feeds and work in places that do not support code blocks, such as presentation slides and YouTube thumbnails. (Always include the text version too when accessibility or copy-paste matters.)

Options

  • 21 languages with auto-detection, powered by highlight.js.
  • Themes: GitHub Light, Monokai, Dracula, Visual Studio and Nord.
  • Window frame: macOS traffic lights, Windows controls or none, with a custom file name as the title.
  • Line numbers, font size, padding, corner radius and shadow sliders.
  • Backgrounds: gradient presets, any solid color or transparent.
  • Sizes: auto, 16:9, 1:1, 4:5, 1.91:1 and 9:16 for every social network.
  • Resolution 1×, 2× or 3× for crisp text on Retina displays.

Tips

Keep snippets short — 5 to 25 lines is ideal for a social post. Remove unnecessary indentation and long lines; the image grows to fit the longest line. Dark themes such as Dracula and Monokai pop on light gradients; GitHub Light works well on darker backgrounds. Need highlighted code as HTML instead of an image? Use the Code Highlighter. For screenshots of apps, try the Screenshot Beautifier.

Frequently Asked Questions

JavaScript, TypeScript, Python, Java, C, C++, C#, PHP, Ruby, Go, Rust, Kotlin, Swift, SQL, HTML/XML, CSS, SCSS, JSON, YAML, Bash and Markdown. Auto-detect picks the most likely language for you.

Keep Resolution at 2× (the default) or choose 3×. The image is rendered with more pixels while the layout stays the same, so text stays crisp on high-density displays and after social networks recompress it.

No. Highlighting uses highlight.js and the image is drawn on a canvas in your browser, so private or proprietary code never leaves your computer.