HTML to Image — Convert HTML & CSS to PNG

What it does

This tool saves a piece of HTML and CSS, such as a card, notice, table, button or email banner, as a PNG image. Use it to show rendered output in documentation or a blog post, to build a social media notice card in code, or to share part of a design as an image. Unlike cropping a screenshot, you get an exact width and scale.

How to use

1. Paste code into HTML: a whole document (<html>…) or just a fragment. New here? Click Insert example.
2. Optionally add styles under CSS. <style> blocks inside the HTML apply as well.
3. Set the Capture width (px), Scale (1×, 2×, 3×) and Background (white or transparent).
4. Check the preview, click Create PNG, then Save PNG.

How it works

• Safe preview: the code is drawn in a sandboxed iframe. The sandbox stops scripts from running, and a Content Security Policy blocks every network request except data: and blob: addresses.
• Outside addresses removed: the pasted code is first read by the browser’s own HTML and CSS parsers (nothing loads at this step). Every address that is not data: or blob: in src, srcset, poster, SVG href, style attributes, <style>, url(), image-set(), @import and @font-face is removed and listed for you. Just before capture the preview is checked again, and while capturing only data: and blob: addresses can be read, so no request ever goes to an outside address. Links (<a href>) do not affect the picture, so they are not listed; they are changed so that clicking them goes nowhere.
• Capture size: the content is laid out at the chosen width and captured at its real height. The PNG is width × scale by height × scale.
• Size limit: above what the browser can handle (16,777,216 pixels on iPhone and iPad, 16,384 px per side) the scale is lowered automatically and the page says so.
• Whole documents: only the <body> content and every <style> block are used; other <head> tags are dropped.
• Capturing uses html-to-image (MIT licence).

Examples

Input	Settings	Result
The example notice card	Width 800, 2×	PNG 1600 px wide
A <table> with CSS	Width 600, 3×, transparent	PNG 1800 px wide, transparent background
Code with an outside image	Width 800, 1×	The outside image stays empty; blocked addresses are listed

For vector drawings, use SVG to PNG; for Markdown, try the Markdown preview.