How to use it
- Paste your HTML into the HTML box and your styles into the CSS box.
- Set the width and height of the image in pixels.
- Choose a scale (1x, 2x or 3x) for sharper, retina-ready output.
- Click Export PNG to download the file.
Why convert HTML to PNG in the browser?
PNG is lossless and supports transparency, which makes it the best choice for social cards, banners, thumbnails, email graphics and UI mockups that you design in code.
Because the conversion happens on your device, there is no upload wait and no limit on how often you export. Raise the scale to 2x or 3x for high-DPI screens.
Tips for crisp PNG exports
Inline your fonts as Base64 @font-face rules and embed images as data URLs so nothing is blocked by cross-origin rules. Set explicit dimensions on your layout, and leave the body background unset if you want a transparent PNG.
Frequently asked questions
Can I export a PNG with a transparent background?
Yes. If you do not set a background color on the page, the PNG keeps its transparent areas.
How do I get a higher-resolution PNG?
Use the Scale selector. 2x doubles the pixel dimensions of the stage size, and 3x triples them, within the browser canvas limits.
Is my code uploaded to a server?
No. The conversion runs entirely in your browser using the Canvas, Web Animations and MediaRecorder APIs. Your HTML, CSS and images never leave your device.
Why are some external images blank in my export?
Browsers block canvas export when an image comes from another website that does not allow cross-origin access (a "tainted canvas"). Embed the image as a Base64 data URL, or host it on a server that sends CORS headers, and it will render.