📸 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.
How to Use
1
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.
2
Paste your code
Type or paste code into the input area. The preview card updates instantly as you type.
3
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.
Guía: Generador de Capturas de Código
¿Qué es?
Convierte fragmentos de código en imágenes atractivas con resaltado de sintaxis, marcos de ventana y fondos de gradiente. Ideal para posts en redes sociales, presentaciones y artículos técnicos.
Cómo usar
- Pega tu código en el área de texto.
- Elige tema: Dracula, VS Dark, Night Owl, etc.
- Selecciona gradiente de fondo y ajusta padding.
- Exporta como PNG.
Consejos
- Limita a 15-20 líneas — capturas más largas son difíciles de leer en redes.
- El tema Dracula sobre fondo morado es muy popular en la comunidad dev de Twitter.
- Desactiva los puntos MacOS para un look más universal.