📸 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.

संपूर्ण गाइड: Code Screenshot Generator

Code Screenshot Generator क्या है?

Code Screenshot Generator beautifully styled code snippets के images create करता है social media, presentations, और documentation के लिए। Carbon.sh और Ray.so जैसे tools ने इस format को popularize किया। Syntax highlighting, custom themes, और window chrome के साथ professional screenshots बनते हैं।

Twitter/X, LinkedIn, और technical blogs पर code screenshots highly engaging होते हैं क्योंकि code को images में share करना easy है।

कैसे उपयोग करें

Code paste करें।
Language select करें syntax highlighting के लिए।
Theme और background choose करें।
Font size और padding adjust करें।
Export करें: PNG, SVG।

Pro Tips

Dark themes (Dracula, One Dark) social media पर well-perform करते हैं।
Code को 20-30 lines तक limit करें — longer screenshots read करना मुश्किल होता है।
2x resolution export करें retina displays के लिए।