Designers and developers constantly need a picture of a piece of HTML: a social card, a banner mock-up, an email header, a styled quote. This free converter renders your snippet to a real PNG. Paste HTML with inline styles (or a <style> block), set the pixel size, click render, download.
It uses the browser’s own rendering engine through an SVG, so what you get is genuinely what a browser would paint — with a few hard limits around external files that the article below explains honestly, because every tool of this kind has them.
How to convert HTML to an image
- Paste your HTML into the box. Inline
style="..."attributes and a<style>block inside the snippet both work. - Set the width and height of the output picture in pixels, and a background colour (anything outside your snippet shows in this colour).
- Click Render PNG and check the preview.
- Click Download PNG.
A worked example, with the numbers
The sample snippet is a centred card: a 90 px star, a 44 px heading and a 20 px line of text. Rendered at 800 × 600, the PNG is exactly 800 × 600 pixels and about 40–90 KB depending on colours. Double the canvas to 1600 × 1200 and the same code renders at the same layout size — your CSS pixels are the picture’s pixels, so for a retina-sharp card, design at double size or scale your font sizes up.
How it works
Your snippet is placed inside a holder element, serialised as well-formed XHTML, and embedded in an SVG foreignObject — a standard way to make a browser paint HTML into a canvas. The canvas then exports a PNG. This is the same technique behind popular libraries like dom-to-image and html2canvas-style tools, running entirely in your tab: your code is never uploaded.
The honest limits (every tool like this has them)
- External images and files will not load. For security, SVG rendering cannot fetch outside resources — an
<img src="https://...">will render blank and can block the export. Embed images as data URLs instead. - Web fonts fall back. Only fonts installed on the viewer’s system are guaranteed; link a Google Font and the render uses a fallback instead.
- JavaScript does not run. The snapshot is of the static HTML/CSS — render charts and widgets to static markup first.
- System emoji and form widgets can look slightly different across operating systems, because the local browser paints them.
Good uses
- Social and OG cards: design the card as HTML, export at 1200 × 630.
- Documentation and tutorials: picture-perfect code-output examples.
- Email headers and banners designed in HTML but needed as flat images.
- Quotes and announcements styled once, shared everywhere as PNG.
Designing for a clean render
- Size in px, and design at the size you export — or at exactly double for retina sharpness, scaling font sizes with it.
- Give the outer element the background if the colour must travel with the design; otherwise the Background picker here fills the gaps.
- Keep fonts to the safe stack (Arial, Georgia, Verdana, system serif/sans) unless every viewer shares your font collection.
- Test with the worst snippet, not the best: long words, missing data and empty states are where fixed-size cards break.
Frequently asked questions
Why did my image come out blank?
Almost always an external reference: a linked stylesheet, a web font, or an image URL. Inline the CSS, use system fonts, and embed any image as a data URL, then render again.
Can I render a whole web page by URL?
No — browsers do not allow a page to reach into another site and photograph it. Paste the page’s HTML (or the part you need) instead.
Is my code sent to a server?
No. Parsing, rendering and the PNG export all happen locally in your browser.
Related tools
Versión en español: Convertir HTML a Imagen – Transforma código HTML en PNG gratis. You may also like: Add Text to Image – Put Words on Any Photo Online, Free · Animate Gmail Profile Picture – Make an Animated GIF Profile Photo Free.
Embed this tool on your website — free
Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.