Guide

How to Convert HTML to PDF Online — Free, CSS Preserved, No Watermark

Render any HTML markup or .html file as a crisp PDF — Flexbox, Grid, web fonts, JavaScript output, all preserved by a real Chromium engine. Free, no sign-up, no watermark. Step-by-step guide, page control with @page, common problems, comparison vs Smallpdf and iLovePDF.

10 min readconvertpdfgo teamUpdated

You designed an invoice as HTML+CSS because that's the easiest way to lay one out. You have a generated report your script outputs as .html. You want to ship a styled email receipt as a PDF attachment. Rendering HTML to a PDF used to mean buying wkhtmltopdf, configuring Puppeteer, or shipping Chromium binaries. None of that is needed. Drop the HTML on a page, get a PDF that looks exactly like Chrome shows it. Here's how, in fifteen seconds.

When you actually need HTML → PDF

Real cases: invoices generated from a template, receipts that need to email as attachments, exported reports from your analytics tool, printable versions of a webpage built locally, AI-generated content you want to share as a static file, and any time a designer hands you HTML+CSS and asks for a print-ready PDF.

Why HTML in the first place? Because CSS is the most expressive layout language we have. Flexbox positions a header. Grid lays out a four-column report. @media print hides navigation and shows page numbers. None of this is easy in Word; all of it is easy in HTML.

When you want URL to PDF instead

If the page is already live on the web (a blog post, a Medium article, a documentation page), use URL to PDF — paste the URL, get a PDF. HTML to PDF is for HTML you control: local files, pasted markup, generated output.

How to convert HTML to PDF, step by step

1

Open the HTML to PDF tool

Go to convertpdfgo.com/html-to-pdf. No account, no email, no installation. Page loads in under a second.
2

Paste your HTML (or drop the file)

Paste markup directly into the textarea, or drop an .html file from your device. External CSS and image URLs are fetched at render time; inline styles work without any network access at all.
3

A real Chromium engine renders it

Behind the scenes, your HTML goes through a server-side headless Chrome. That means whatever Chrome shows is what you get in the PDF — Flexbox, Grid, transforms, animations frozen to their final state, web fonts, custom properties (variables), the works.
4

Download the PDF

The output is a single PDF, A4 portrait by default. CSS @pagerules in your HTML are honoured — set @page { size: Letter landscape; margin: 0.5in; } to override.

What renders well — the full Chrome surface

Because we use a real Chromium engine (not wkhtmltopdf, not an ad-hoc HTML parser), almost everything that works in Chrome works here:

  • Layout: Flexbox, Grid, multi-column, floats, positioned elements — all honoured.
  • Typography: system fonts, embedded @font-face rules, Google Fonts via @import or <link>, font ligatures, OpenType features.
  • Colour and effects: gradients, box-shadow, border-radius, opacity, blend modes, SVG filters.
  • Images: JPG, PNG, WebP, SVG, all at their original resolution.
  • JavaScript: runs during rendering, so dynamic content (Chart.js, D3, React, Vue) lands in the PDF. It's a one-shot render — interactivity is gone — but the rendered output is there.
  • Print-specific CSS: @page rules for size/margin, @media print for hiding nav / showing footers, page-break-before, page-break-inside: avoid.

Controlling page size, margins, and breaks

For control over the final PDF's page layout, use standard CSS print rules in your HTML. Three you'll use most:

@page {
  size: A4 portrait;        /* or Letter landscape, 8.5in 11in, ... */
  margin: 2cm 1.5cm;        /* top/bottom, left/right */
}

@media print {
  .no-print { display: none; }
  .invoice  { page-break-after: always; }
  table     { page-break-inside: avoid; }
}

h1, h2 {
  page-break-after: avoid;  /* keep heading + first paragraph together */
}

For headers and footers on every page

Standard CSS Paged Media supports @page :first / :left / :right with @top-left, @top-right,@bottom-center for repeating headers and footers. The Chromium engine implements the common patterns; complex ones (running headers from the document content) may need a workaround.

Common conversion problems and how to avoid them

Fonts come out as Times New Roman

The font was referenced but not loaded. Fix: include a Google Fonts <link> in the <head>, or inline an @font-face rule with a base64 data URL for fully self-contained HTML. Both work — the difference is whether the renderer has internet access at conversion time (it does).

Page breaks happen mid-paragraph

Add p, h1, h2 { page-break-inside: avoid; }to your CSS for tighter control, and page-break-after: always on elements you want to force onto a new page (like chapter headings or section dividers).

Background colours are missing

Chrome's default print stylesheet hides backgrounds for ink savings. Override with * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } at the top of your CSS. The renderer respects this.

Dynamic content from JS arrives empty

The renderer waits ~3 seconds for JavaScript to settle, then snapshots. If your dynamic content takes longer (async API calls, large data loads), pre-render server-side first and pass the settled HTML instead.

A short word on privacy

Three things to know. One: pasted HTML and uploaded files go over TLS 1.3. Two: HTML and output PDFs are encrypted at rest while we process them, then deleted automatically within one hour. Three: we don't look at your content, train on it, or send it anywhere. If your HTML references external assets (images, CSS, fonts), those URLs are fetched at render time — check that the asset hosts are ones you trust.

If the HTML contains secrets

Don't paste API keys, tokens, or internal URLs into the textarea. They'd be in the input even if encrypted in transit and at rest. Strip them, or render locally with a headless Chrome you control.

How we compare to other free HTML-to-PDF tools

FeatureconvertpdfgoSmallpdf (free)iLovePDF (free)
RendererReal ChromiumChromiumChromium
Sign-up NoneAfter 2 files/dayOptional
Watermark None None None
JavaScript executes YesPartialPartial
Auto-delete window1 hourVague2 hours

Frequently asked questions

Can I include images via remote URLs?

Yes. The renderer fetches remote images, CSS, and fonts at render time. Self-contained HTML with base64 data URLs also works and doesn't require network access.

What about JavaScript libraries like Chart.js or D3?

They run. The renderer waits a few seconds for JavaScript to settle, then snapshots — so a Chart.js bar chart renders into the PDF as the SVG/canvas Chrome painted.

Can I get headers and footers on every page?

Yes — use CSS Paged Media: @page { @top-left { content: "My Title"; } @bottom-right { content: counter(page); } }.

What's the maximum HTML size?

Pasted HTML up to 5 MB, uploaded .html files up to 30 MB. External assets (images, CSS) can be larger as long as the HTML itself fits.

How long does conversion take?

About 2–4 seconds for typical HTML. Heavier pages with lots of JavaScript or remote images can take up to 15 seconds — we wait for the page to settle before rendering.

Can I use this from a server-side script?

The tool itself runs in the browser, but if you have a real programmatic need, our same renderer is on the roadmap as a documented API endpoint.

Is there a usage limit?

No. The tool is free, with no daily cap, no sign-up wall, no watermark, and no upsell.

What to do next

One-click follow-ups

Now that your HTML is a PDF, you can merge it with other PDFs, compress it, password-protect it, sign it, or watermark it. All free.

Or browse our full list of 49 free PDF tools — every common PDF task has a clean, single-purpose page with no sign-up, no watermark, and a one-hour auto-delete window.