Code to Image Generator

Paste a snippet, pick a theme and background, and export a crisp PNG in seconds. No signup, no watermark, everything runs in your browser.

Code Screenshots for Your GitHub README

  1. 1

    Paste your snippet and pick a theme. Line numbers and a macOS title bar are optional.

  2. 2

    Turn the Background switch off for a transparent PNG that sits cleanly on both GitHub light and dark mode, or keep a gradient for a hero image.

  3. 3

    Export at 2x so the image stays sharp on high-density screens, then save it in your repository, for example docs/code-example.png.

  4. 4

    Reference it from README.md with a relative path and descriptive alt text.

Embed it in README.md:

![fetchUser returns a typed User from the API](./docs/code-example.png)

Or show a separate image in GitHub dark mode:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./docs/code-dark.png">
  <img alt="fetchUser returns a typed User from the API" src="./docs/code-light.png" width="720">
</picture>

Perguntas frequentes

Paste the snippet into Screenshot Studio, pick a syntax theme, turn the background off for a transparent PNG or keep a gradient, export at 2x, commit the file to your repository, and embed it in README.md with a relative image path and alt text.

Use a fenced code block for anything readers need to copy or search, and an image for a hero example or a visual comparison. Many READMEs use both: the image to catch the eye, the code block right below it.

Export one image with a light theme and one with a dark theme, then wrap them in a picture element with a prefers-color-scheme source. GitHub shows the matching image for each reader.

Yes. Every theme, background, and export option is free, with no signup and no watermark.

14 color themes (Midnight, Candy, Sunset, and more), each pairable with its own gradient, one of Screenshot Studio's gradient and image backgrounds, or a simple pattern.

Yes. Turn the Background switch off before exporting and the PNG keeps a transparent backdrop.

Pick the theme's own gradient, one of dozens of gradient presets, a real image background, or a simple grid, dot, or line pattern, all from the Background picker.

Coming from another tool? See how it compares to Carbon and Ray.so, or explore the code snippet feature.