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.
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
How to convert HTML to PDF, step by step
Open the HTML to PDF tool
Paste your HTML (or drop the file)
A real Chromium engine renders it
Download the PDF
@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-facerules, Google Fonts via@importor<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:
@pagerules for size/margin,@media printfor 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
@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
How we compare to other free HTML-to-PDF tools
| Feature | convertpdfgo | Smallpdf (free) | iLovePDF (free) |
|---|---|---|---|
| Renderer | Real Chromium | Chromium | Chromium |
| Sign-up | None | After 2 files/day | Optional |
| Watermark | None | None | None |
| JavaScript executes | Yes | Partial | Partial |
| Auto-delete window | 1 hour | Vague | 2 hours |
Frequently asked questions
Can I include images via remote URLs?
What about JavaScript libraries like Chart.js or D3?
Can I get headers and footers on every page?
@page { @top-left { content: "My Title"; } @bottom-right { content: counter(page); } }.What's the maximum HTML size?
How long does conversion take?
Can I use this from a server-side script?
Is there a usage limit?
What to do next
One-click follow-ups
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.