Create a PDF invoice from HTML (free template)

HTML is a good fit for invoices: you can style them like your website, fill them from a spreadsheet or app, and turn them into PDFs that look the same everywhere. Below is a complete template you can paste into the converter and edit.

The template

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoice INV-1042</title>
<style>
  body { font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; color: #1d1d1b; margin: 0; }
  .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
  h1 { font-size: 26pt; margin: 0 0 4px; letter-spacing: -0.5px; }
  .muted { color: #6a6c6a; }
  .parties { display: flex; gap: 48px; margin-bottom: 28px; }
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; font-size: 9pt; text-transform: uppercase; letter-spacing: .5px;
       background: #163300; color: #fff; padding: 8px 10px;
       -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  td { padding: 9px 10px; border-bottom: 1px solid #e3e5e1; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  tr { break-inside: avoid; }
  .totals { margin-left: auto; width: 45%; margin-top: 16px; break-inside: avoid; }
  .totals td { border: 0; padding: 4px 10px; }
  .totals .grand td { font-weight: bold; font-size: 13pt; border-top: 2px solid #163300; padding-top: 10px; }
  .notes { margin-top: 36px; break-inside: avoid; }
</style>
</head>
<body>
  <div class="top">
    <div><h1>Invoice</h1><div class="muted">INV-1042 · Issued 9 October 2026 · Due 23 October 2026</div></div>
    <div style="text-align:right"><strong>Your Company Ltd</strong><br>1 High Street<br>London EC1A 1AA</div>
  </div>
  <div class="parties">
    <div><div class="muted">Bill to</div><strong>Client Name</strong><br>22 Market Road<br>Manchester M1 1AA</div>
    <div><div class="muted">Payment</div>Bank transfer<br>Sort code 00-00-00<br>Account 00000000</div>
  </div>
  <table>
    <thead><tr><th>Description</th><th class="num">Qty</th><th class="num">Rate</th><th class="num">Amount</th></tr></thead>
    <tbody>
      <tr><td>Website design</td><td class="num">1</td><td class="num">£1,200.00</td><td class="num">£1,200.00</td></tr>
      <tr><td>Copywriting (hours)</td><td class="num">6</td><td class="num">£45.00</td><td class="num">£270.00</td></tr>
      <tr><td>Hosting, 12 months</td><td class="num">1</td><td class="num">£96.00</td><td class="num">£96.00</td></tr>
    </tbody>
  </table>
  <table class="totals">
    <tr><td>Subtotal</td><td class="num">£1,566.00</td></tr>
    <tr><td>VAT (20%)</td><td class="num">£313.20</td></tr>
    <tr class="grand"><td>Total due</td><td class="num">£1,879.20</td></tr>
  </table>
  <div class="notes muted">Thank you for your business. Please include the invoice number as your payment reference.</div>
</body>
</html>

Replace the placeholder company, bank and client details with your own. The figures are examples; check tax rules for your country.

Convert it

1. Open the converter and paste the template into HTML Code.
2. Leave A4 portrait for UK and European invoices, or choose Letter for the US.
3. Leave Print backgrounds as it is. The header colour is on the table cells, so it prints either way.
4. Convert, check the preview, and download.

Why the CSS is written this way

• Points (pt) for type give predictable sizes on paper.
• <thead> repeats the column headings on every page of a long invoice.
• break-inside: avoid on rows and the totals block stops a line item or the total from splitting across pages.
• print-color-adjust: exact keeps the dark header even in ink-saving print modes.
• Tabular numbers line amounts up neatly in columns.

Add a logo

Embed it as a data URL, or link it with a full public URL. A relative path like logo.png won’t load because only the HTML is sent. See fonts and images in HTML to PDF.

Making many invoices

If you produce invoices from an app or spreadsheet, generate the HTML from your data and send it to the HTML to PDF API instead of pasting each one.