# HTML to Image

> Turn HTML and CSS into a PNG or JPEG you can drop anywhere. Rendered on your device, never uploaded.

URL: https://uttir.com/html-to-image
Categories: image-tools, developer-tools, web-tools
Privacy: Your HTML is rendered to an image inside your browser. Nothing is uploaded, and no server is contacted.

## About

Paste a fragment of HTML, style it however you like, and get back an image file. The markup is rendered by your own browser into a canvas, so what you see in the preview is what lands in the file.

Styles written in a <style> block are re-rooted under the render area before anything is drawn, so your CSS can restyle your card without touching the rest of the page. Scripts, frames and form controls are stripped — the output is a picture, not a running program.

## How to use

1. **Paste your HTML** — Drop markup into the editor, or load the sample to see the shape of a card.
2. **Check the preview** — The render area updates as you type. Anything removed from your markup is listed underneath.
3. **Pick a format and scale** — PNG keeps transparency; JPEG is smaller for photos. 2× suits retina, 1× suits email.
4. **Download the image** — The file is written straight to your device — no upload step.

## Examples

### A quote card

Two lines of markup and a little CSS become a shareable image.

Input:

```
<div class="card">
  <h1>Ship it</h1>
  <p>Friday, 17:00</p>
</div>
```

Output:

```
A 1200×630 PNG with the card centred on a soft background.
```

## FAQ

### Can I screenshot a website by URL instead?

No, and no browser-based tool can. A page on another origin cannot be read, measured or framed by a site that is not its own — that is a security boundary, not a limitation of this tool. This one takes your own markup, which is why it works entirely offline and without sending the address of anything to a server.

### Why were parts of my HTML removed?

Scripts, frames, embedded objects and form controls are stripped because a picture has no use for them, and because leaving them in would let pasted markup run code on this page. Everything else — text, layout, tables, images, inline styles, class and id selectors — is kept.

### Will my CSS leak into the rest of the page?

No. Selectors in a <style> block are rewritten to sit underneath the render area, so a rule like `.card { color: red }` becomes `.card { color: red }` scoped to your render. Rules that cannot be scoped safely — @import, @font-face, @keyframes — are dropped, so link a webfont in the page instead.

### Why did my image not appear in the output?

Images hosted on another site have to allow cross-origin reads before a browser will draw them into a canvas. If yours is missing, host it where the browser can fetch it, or embed it directly as a base64 data URL.

### What scale should I choose?

Use 2× for anything displayed on a high-density screen such as a social card or a retina display, and 1× for email, where file size matters more than sharpness. Above about 2× a large card gets slow and can fail on phones, so the tool warns you before it starts.

## Related tools

- [HTML to PDF](https://uttir.com/html-to-pdf) — Convert HTML to a PDF in your browser. Write or paste HTML, see a live preview, and download a print-ready PDF. No upload, no tracking, no server.
- [HTML Minifier](https://uttir.com/html-minifier) — Shrink HTML by stripping comments and collapsing whitespace. See byte savings in real time.
- [Placeholder Image Generator](https://uttir.com/placeholder-image-generator) — Generate inline SVG placeholder images at any size with custom text and colors. Pure SVG, no server.
- [Color Palette Generator](https://uttir.com/color-palette-generator) — Generate 5-color palettes from any base color using classic harmony schemes — analogous, complementary, triadic, and more.

---

For the full HTML page with the live tool, visit https://uttir.com/html-to-image.
This file is the markdown rendering at https://uttir.com/html-to-image.md. See https://uttir.com/llms.txt for a site-wide summary.