HTML to Image
Paste an HTML snippet and its CSS, watch it render as you type, and export the result as a sharp PNG, JPG, WebP or SVG. Great for social cards, email banners, UI mockups, badges and documentation screenshots, all generated in your browser.
Last updated:
Edits render live. Scripts are not run; HTML and CSS only.
The checkerboard shows transparent areas. Only the content inside the preview frame is exported, so put backgrounds on your outer element (or pick a background above).
How to use the HTML to Image
- Pick a template or choose Blank, then paste your own HTML and CSS into the two editors.
- Set the width in pixels (leave it empty for auto) and add padding if you want space around the design.
- Choose the background: transparent for overlays and slides, or a solid color.
- Choose the format and scale. 2× gives a crisp image on phones and high-density screens.
- Download the image, or press Copy image to paste it into a chat, document or design tool.
How HTML becomes an image
Your HTML and CSS are rendered inside a sandboxed frame by the browser's normal layout engine, so flexbox, grid, gradients, shadows, rounded corners and pseudo-elements all look the way they do on a web page. To export, the open-source html-to-image library copies the element and its computed styles into an SVG foreignObject, then the browser paints that SVG onto a canvas at the scale you chose and encodes it as PNG, JPG or WebP. The output size is the element's size times the scale: an 800 × 420 px card at 2× becomes a 1600 × 840 px image.
Which format to choose
| Format | Transparency | Best for | Notes |
|---|---|---|---|
| PNG | Yes | UI elements, badges, text-heavy cards, slides | Lossless, sharp edges; larger files for photos |
| JPG | No (white fill) | Cards with photos or gradients, email | Smallest for photographic content; quality slider |
| WebP | Yes | Websites and blogs | Lossless WebP is about 26% smaller than PNG on average, per Google |
| SVG | Yes | Web pages that need crisp zoom | Uses foreignObject; not supported by every design app |
Tips for clean exports
- Style an outer wrapper. Put the background, padding and border radius on one outer element. Styles on
bodyare not part of the exported element. - Give the design a fixed width for social images: 1200 px wide for link previews or 1080 px for square posts, then export at 1×.
- Leave room for shadows. A
box-shadowoutside the element is cut off; add a margin to the element or use the Padding option. - Prefer system fonts such as system-ui, Georgia or Arial for reliable results, or embed fonts as data: URLs.
- Sharing code instead of a layout? Code to Image makes syntax-highlighted snippets, and HTML to PDF turns whole pages into documents.
Frequently asked questions
How do I convert HTML to an image?
Paste your HTML into the HTML box and your styles into the CSS box. The preview renders it with your browser's own layout engine. Then choose PNG, JPG, WebP or SVG and press Download. The image has exactly the size of the rendered element, multiplied by the scale you pick.
Can I get a PNG with a transparent background?
Yes. Keep Background set to Transparent and export PNG, WebP or SVG. Any area your own CSS does not paint stays transparent, which is shown as a checkerboard in the preview. JPG has no transparency, so it gets a white background.
Why are my images or web fonts missing from the export?
To draw external images and fonts into the picture, the browser must download them, and it can only do that when the other server allows cross-origin requests (CORS). Many sites do not. Use images from CORS-enabled hosts or data: URLs, and system fonts or fonts from services that send CORS headers.
Does JavaScript in my HTML run?
No. The preview is a sandboxed frame that blocks scripts, so pasted code cannot run or access the page. Content that only appears after JavaScript runs, such as charts drawn by a library, will not be shown. Export the static HTML and CSS instead.
What resolution should I use?
Use 1× when you need the exact pixel size, for example a 1200 px wide banner. Use 2× for images viewed on phones and retina screens, and 3× or 4× for print or slides that will be zoomed. Very large exports are limited to 16,384 pixels on each side by the browser.
Is the SVG export a real vector file?
The SVG wraps your HTML in a foreignObject element, so text and shapes stay sharp at any zoom in web browsers. Some design programs and Office apps do not support foreignObject; use a 3× or 4× PNG for those.
Is my code uploaded anywhere?
No. Rendering and image creation happen in your browser with the open-source html-to-image library. Your last HTML and CSS are kept only in this browser's local storage.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.