HTML to PDF

Paste a full HTML document, preview it, and print as a PDF. Great for invoices, reports, certificates, and email templates.

HTML Document

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #0f172a; }
    h1 { color: #0C4A6E; border-bottom: 2px solid #BAE6FD; padding-bottom: 0.5rem; }
    .badge { display: inline-block; background: #D97706; color: white; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; margin-bottom: 1rem; }
    table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
    th { background: #0C4A6E; color: white; padding: 0.75rem 1rem; text-align: left; }
    td { padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; }
    tr:last-child td { border-bottom: none; }
  </style>
</head>
<body>
  <span class="badge">SAMPLE REPORT</span>
  <h1>CaptureKit HTML to PDF</h1>
  <p>Edit this HTML template in the text area. Click "Print as PDF" to save it to your computer.</p>
  <table>
    <tr><th>Tool</th><th>Category</th><th>Status</th></tr>
    <tr><td>Screenshot</td><td>Capture</td><td>✅ Ready</td></tr>
    <tr><td>Webpage to PDF</td><td>Export</td><td>✅ Ready</td></tr>
    <tr><td>HTML to Image</td><td>Render</td><td>✅ Ready</td></tr>
    <tr><td>HTML to PDF</td><td>Export</td><td>✅ Ready</td></tr>
  </table>
</body>
</html>

Pro Tips for Better PDFs

Include @media print CSS for print-specific styles
Use page-break-before: always to control page breaks
Enable "Background graphics" in the print dialog for background colors
Set margin: 0 in print CSS if you want no browser margins

Frequently Asked Questions

Will CSS styles be preserved in the PDF?

Most CSS works — layout, colors, fonts, borders, and tables all render well. Background images may need 'Background graphics' enabled in the print dialog. Some complex CSS (animations, fixed positioning) behaves differently.

How do I control page breaks?

Use CSS properties: page-break-before, page-break-after, and page-break-inside. For example: h1 { page-break-before: always; } to start a new page before every h1.

Can I use Google Fonts in my HTML?

Yes — include the Google Fonts link in the <head> of your HTML. The print dialog renders the page as the browser sees it, so fonts load normally.

How do I remove browser headers/footers from the PDF?

In Chrome's print dialog, uncheck 'Headers and footers'. In Firefox, go to File → Page Setup → Headers/Footers and set all to blank.

HTML to PDF

Pro Tips for Better PDFs

Frequently Asked Questions

Other Tools