📸 Code Screenshot — Beautiful Code Images

Turn your code into beautiful screenshots with syntax highlighting, custom themes, gradient backgrounds, and window chrome. Export as PNG. Free code image generator.

Theme

Background

Padding

Font

Mac Dots

code

onhtml.com

How to Use

Choose theme and background

Select a syntax theme (Dracula, VS Dark, Night Owl…) and a gradient background. Toggle mac window dots and adjust padding to taste.

Paste your code

Type or paste code into the input area. The preview card updates instantly as you type.

Export as PNG

Click Export PNG. html2canvas renders the card at 2× resolution — sharp on Retina displays and ready for social media or blog posts.

Frequently Asked Questions

Is there a watermark on the exported image? +

A small "onhtml.com" watermark appears in the bottom corner of the code area at very low opacity. It is part of the design and helps spread the word about the tool.

What resolution is the exported PNG? +

The export uses html2canvas at 2× pixel ratio, producing a high-resolution image suitable for Retina displays, presentations, and social media.

Does it support syntax highlighting? +

The current version renders code with the chosen theme colors without language-specific highlighting. Full syntax coloring is on the roadmap.

Is my code uploaded to a server? +

No. The entire rendering and export happens in your browser. Your code never leaves your device.

Guide : Capture d'Écran de Code

Qu'est-ce que c'est ?

L'outil de Capture d'Écran de Code génère de belles images de snippets de code avec coloration syntaxique, thèmes personnalisables et arrière-plans dégradés — idéal pour les réseaux sociaux.

Partagez du code lisible sur Twitter/X, LinkedIn ou dans des présentations sans screenshots ternes de votre IDE.

Comment utiliser

Collez votre snippet de code dans l'éditeur.
Sélectionnez le langage pour la coloration syntaxique.
Choisissez un thème (Dracula, GitHub, Solarized…) et un fond.
Téléchargez en PNG ou copiez dans le presse-papiers.

Conseils professionnels

Activez les ombres de fenêtre et l'arrière-plan dégradé pour un look professionnel.
Gardez les snippets courts (<20 lignes) — les longues captures sont difficiles à lire sur mobile.