Free invoice HTML template (PDF-ready)

A clean, print-ready invoice HTML template with CSS for A4. Copy it, fill it with your data, and convert it to PDF in one API call.

Convert this to PDF → Download .html

Paper: A4 · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@invoice.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o invoice.pdf

Or ask your AI agent: "Make me a invoice PDF using the html-pdf.com invoice template." · Guides · API reference

Tips

Rows never split across pages (break-inside: avoid) and the table header repeats on long invoices.
Fill it with a template engine (Handlebars, Jinja, Blade) so customer data is escaped.
Send "filename": "invoice-042.pdf" to name the download.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoice INV-2026-042</title>
<style>
  @page { size: A4; margin: 18mm; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 12px; line-height: 1.5; margin: 0; }
  .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
  .brand { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
  h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -0.02em; }
  .muted { color: #666; }
  .parties { display: flex; gap: 48px; margin-bottom: 32px; }
  .parties div { flex: 1; }
  .label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 4px; }
  table { width: 100%; border-collapse: collapse; }
  thead { display: table-header-group; }
  th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; text-align: left; padding: 8px 0; border-bottom: 1px solid #111; }
  td { padding: 10px 0; border-bottom: 1px solid #eee; vertical-align: top; }
  .r { text-align: right; }
  tr { break-inside: avoid; }
  .totals { width: 260px; margin: 16px 0 0 auto; break-inside: avoid; }
  .totals td { border: 0; padding: 4px 0; }
  .totals .grand td { border-top: 1px solid #111; padding-top: 10px; font-size: 16px; font-weight: 700; }
  .note { margin-top: 48px; padding: 14px 16px; background: #f5f5f5; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 18mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); box-sizing: border-box; }
  }
</style>
</head>
<body>
  <div class="top">
    <div class="brand">Your Company</div>
    <div class="r">
      <h1>Invoice</h1>
      <div class="muted">INV-2026-042</div>
    </div>
  </div>

  <div class="parties">
    <div><div class="label">From</div><strong>Your Company S.L.</strong><br>Carrer de Example 1<br>08001 Barcelona, Spain<br>VAT ES B12345678</div>
    <div><div class="label">Bill to</div><strong>Acme Inc.</strong><br>500 Market Street<br>San Francisco, CA 94105<br>billing@acme.example</div>
    <div class="r"><div class="label">Issued</div>October 10, 2026<div class="label" style="margin-top:10px">Due</div>November 9, 2026</div>
  </div>

  <table>
    <thead><tr><th>Description</th><th class="r">Qty</th><th class="r">Unit price</th><th class="r">Amount</th></tr></thead>
    <tbody>
      <tr><td>Website redesign<br><span class="muted">Design and implementation, 4 pages</span></td><td class="r">1</td><td class="r">$2,400.00</td><td class="r">$2,400.00</td></tr>
      <tr><td>Consulting<br><span class="muted">Hourly, September 2026</span></td><td class="r">6</td><td class="r">$120.00</td><td class="r">$720.00</td></tr>
      <tr><td>Hosting<br><span class="muted">12 months</span></td><td class="r">1</td><td class="r">$180.00</td><td class="r">$180.00</td></tr>
    </tbody>
  </table>

  <table class="totals">
    <tr><td class="muted">Subtotal</td><td class="r">$3,300.00</td></tr>
    <tr><td class="muted">Tax (0%)</td><td class="r">$0.00</td></tr>
    <tr class="grand"><td>Total due</td><td class="r">$3,300.00</td></tr>
  </table>

  <div class="note"><strong>Payment.</strong> Bank transfer to IBAN ES00 0000 0000 0000 0000 0000. Reference INV-2026-042. Thank you for your business.</div>
</body>
</html>

More templates

Receipt · Certificate · Report · Resume · Proposal · Packing slip · Shipping label · Event ticket · Quote · Purchase order · Timesheet · all templates