Paste HTML or upload a file, then capture a beautiful screenshot for social media and docs.
Screenshots are rendered in your browser. Some CSS features may render differently than in a full browser. JavaScript execution is sandboxed for security.
The pipeline is: your HTML text → an iframe sandbox renders it just like a real page → html2canvas walks the rendered DOM and redraws every element onto a 2D canvas → the canvas is exported as a PNG. The device presets only change the viewport width, so your layout reflows exactly as it would on that screen size.
The sandbox keeps untrusted scripts away from your browsing session. Some exotic CSS (like backdrop-filter) may look different in the capture than in a live browser — the disclaimer calls this out.
You want a doc screenshot that mirrors how readers see it.
To screenshot code beautifully: paste your snippet, pick syntax highlighting and a window style, set gradient and shadow, then export a crisp 2x PNG — all rendered locally so proprietary code never leaves your device.
FreeToolHub Code Screenshot Generator is a free browser-based tool that turns code or HTML into polished shareable images, no signup, no upload.
Collez du code HTML ou du code source, capturez des captures d'écran magnifiques avec des dégradés, des ombres et des coins arrondis. Gratuit, sans inscription, dans votre navigateur.
Le Générateur de Captures de Code transforme le code source ou le HTML rendu en images polies et partageables. Collez un extrait ou un fragment HTML, choisissez un style de fenêtre, et exportez au format PNG. L'outil affiche une coloration syntaxique réelle, entoure le code dans un cadre de style macOS ou simple, et vous permet de contrôler le dégradé d'arrière-plan, le remplissage, la profondeur d'ombre, le rayon de coin et la largeur du canevas, le vocabulaire visuel popularisé par les partages de code sur X et les blogs de développeurs. Tout se passe localement dans votre navigateur : le code que vous collez, qui peut être propriétaire, ne quitte jamais votre machine, et aucun compte ou filigrane n'est impliqué. Un bouton Exemple charge un extrait décoré pour que vous puissiez voir chaque option de style en action avant de coller le vôtre.
Les développeurs qui publient sur X, LinkedIn ou Reddit l'utilisent car les collages de code brut perdent le formatage tandis qu'une image encadrée avec des couleurs de syntaxe attire l'attention et se capture bien sur mobile. Les blogueurs techniques intègrent des extraits stylés sans se battre avec leurs blocs de code de CMS. Les équipes qui rédigent des journaux de changements internes et des examens de design capturent les états du code avant et après dans un style visuel cohérent. Les enseignants et les auteurs de cours produisent des illustrations de code lisibles pour leurs diapositives. Il est également populaire dans les milieux de travail sensibles à la sécurité où le collage de code dans des services en ligne aléatoires est interdit, car ce moteur de rendu s'exécute entièrement côté client, le rendant un choix sûr même pour les branches de fonctionnalités non publiées.
(1) Collez votre code, ou basculez en mode HTML pour restituer le balisage au lieu de le mettre en évidence. (2) Choisissez un langage pour la coloration syntaxique afin que les mots-clés, les chaînes de caractères et les commentaires aient des couleurs distinctes. (3) Stylez la sortie : choisissez un style de fenêtre, définissez le dégradé d'arrière-plan ou une couleur unie, ajustez le remplissage, le rayon de bordure et l'ombre, et basculez les numéros de ligne. (4) Exportez en PNG à l'échelle 1x ou 2x ; l'option 2x maintient le texte net sur les écrans rétine et pour l'impression. L'aperçu se met à jour en direct, donc chaque changement de curseur est visible instantanément, et l'image exportée correspond pixel par pixel à l'aperçu.
Sur les plateformes sociales, les blocs de code à espacement fixe s'affichent dans la police et la taille dictées par la plateforme, souvent sans aucune couleur de syntaxe, et les longues lignes se replient en rubriques illisibles. Une image corrige les trois : vous contrôlez la police, la palette et les sauts de ligne, et la fenêtre encadrée avec un arrière-plan dégradé signale un effort, ce qui augmente mesurablement l'engagement sur les chronologies des développeurs. Les règles pratiques de conception font la différence entre une sortie amateur et professionnelle : gardez les extraits sous environ 15 lignes et recadrez à la partie intéressante, utilisez l'export 2x pour que le texte reste net, choisissez un thème sombre avec un arrière-plan contrasté plutôt que blanc par défaut, et laissez le colorant syntaxique faire l'accentuation au lieu de mettre manuellement en gras le texte. Pour la documentation et les README, les vrais blocs de code restent meilleurs pour le copier-coller ; les images sont pour les contextes de présentation.
Collez le code dans ce générateur, choisissez un langage de coloration syntaxique, sélectionnez un style de fenêtre, un arrière-plan dégradé et une ombre, puis exportez un PNG 2x pour un affichage rétine net — tout dans votre navigateur sans inscription.
Oui. Cet outil rend entièrement côté client — votre code ne quitte jamais votre appareil, le rendant sûr pour du code propriétaire ou non publié, même dans les environnements de travail qui interdisent le collage sur des sites externes.
PNG à l'échelle 2x. Il maintient le texte à espacement fixe net sur les écrans rétine et pour l'impression, et les dimensions de pixels plus grandes empêchent le flou lorsque les plateformes compressent les téléversements.
Les images préservent votre police, vos couleurs de syntaxe et vos sauts de ligne, tandis que les blocs de code des plateformes suppriment le formatage et replient les longues lignes. Un extrait encadré avec un thème sombre et un arrière-plan dégradé est mesurablement plus accrocheur sur X et LinkedIn.
Il rend votre HTML et CSS en utilisant un moteur de navigateur headless, produisant des captures d'écran parfaites pixel par pixel à une résolution de 1x ou 2x. Formats de sortie pris en charge : PNG (sans perte) et JPEG (qualité ajustable 1-100). Idéal pour le partage d'extraits de code, les rapports de bogues et la documentation — pas besoin d'ouvrir DevTools ou d'installer des extensions de navigateur.
Oui. Définissez une largeur de viewport personnalisée (320 px à 3840 px), une hauteur, un ratio de pixels de périphérique et une couleur d'arrière-plan (y compris PNG transparent). Ajoutez un remplissage, des coins arrondis et un cadre de fenêtre de style macOS pour des images de réseaux sociaux polies. Résolution d'exportation jusqu'à 4K pour des captures d'écran de documentation qualité impression.
It renders your HTML and CSS using a headless browser engine, producing pixel-perfect screenshots at 1x or 2x resolution. Supported output: PNG (lossless) and JPEG (adjustable quality 1-100). Ideal for code snippet sharing, bug reports, and documentation—no need to open DevTools or install browser extensions.
Yes. Set custom viewport width (320px to 3840px), height, device pixel ratio, and background color (including transparent PNG). Add padding, rounded corners, and a macOS-style window frame for polished social media images. Export resolution up to 4K for print-quality documentation screenshots.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.