Professional HTML Invoice Template
Create beautiful, professional invoices using pure HTML and CSS. Our template is designed for perfect PDF conversion, includes VAT calculations, and works with any billing workflow. No signup required, completely free.
Why Build Invoices in HTML?
Traditional invoice tools like Microsoft Word or Google Docs have a fundamental problem: they were designed for general document editing, not structured financial documents. When you export a Word invoice to PDF, you often encounter shifted margins, broken tables, and inconsistent fonts across different computers.
HTML solves these problems elegantly. As a markup language designed for structured content, HTML gives you pixel-perfect control over every element. Combined with CSS, you can create invoices that render identically on any device, any browser, and any operating system. The result? Professional invoices that look exactly the way you designed them, every single time.
For developers and tech-savvy business owners, HTML invoices offer additional advantages. You can version control your templates with Git, automate invoice generation with JavaScript, and integrate with your existing web applications. Many companies use HTML templates with backend systems like Node.js or PHP to generate hundreds of invoices automatically.
Template Features
VAT & Tax Support
Built-in rows for VAT, GST, or any tax calculation you need.
Payment Terms
Clear due dates and payment instructions for your clients.
Bank Details
IBAN/BIC section for European SEPA transfers.
Print-Ready CSS
@media print rules ensure perfect A4 output.
How to Customize This Template
1. Update Your Company Information
Replace "Your Company" with your business name. Update the address, email, and contact details in the header section. If you have a logo, you can add an <img> tag with a base64-encoded image or a direct URL to your logo file.
2. Adjust the Color Scheme
The template uses a professional blue accent color (#2563eb). To match your brand, search for this hex code in the CSS and replace it with your primary brand color. Consider maintaining good contrast for readability.
3. Configure Currency & Tax Rates
The template uses EUR (€) by default. Replace the currency symbol throughout the document. For different VAT rates, update the percentage in both the label ("VAT 19%") and recalculate the amounts. German businesses typically use 19% standard VAT or 7% reduced rate.
4. Add or Remove Line Items
Each service/product is a <tr> row in the table. Copy an existing row and modify the description, quantity, unit price, and amount. Make sure to update the subtotal and total calculations accordingly.
Invoice Legal Requirements (Germany/EU)
If you're issuing invoices in Germany or the EU, certain elements are legally required according to §14 UStG (German VAT Act) and EU VAT Directive. Our template includes all mandatory fields:
- Full name and address of both seller and buyer
- Tax identification number (Steuernummer) or VAT ID (USt-IdNr.)
- Invoice date and unique invoice number
- Description of goods/services with quantity and unit price
- Net amount, VAT rate, VAT amount, and gross total
- Date of service (if different from invoice date)
Note: For small business owners using Kleinunternehmerregelung (§19 UStG), you must add a note stating that no VAT is charged. Example: "Gemäß §19 UStG wird keine Umsatzsteuer berechnet."
Complete HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice #INV-2025-001</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
background: #fff;
}
.invoice-container {
max-width: 800px;
margin: 0 auto;
padding: 40px;
}
.invoice-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #eee;
}
.company-info h1 {
font-size: 28px;
color: #2563eb;
margin-bottom: 5px;
}
.invoice-details {
text-align: right;
}
.invoice-details h2 {
font-size: 32px;
color: #1e293b;
margin-bottom: 10px;
}
.invoice-number {
font-size: 16px;
color: #64748b;
}
.addresses {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.address-block h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #94a3b8;
margin-bottom: 10px;
}
.address-block p {
margin-bottom: 3px;
}
.items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
.items-table th {
background: #f8fafc;
padding: 12px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #e2e8f0;
}
.items-table td {
padding: 12px;
border-bottom: 1px solid #f1f5f9;
}
.items-table .amount {
text-align: right;
}
.totals {
display: flex;
justify-content: flex-end;
}
.totals-table {
width: 300px;
}
.totals-table tr td {
padding: 8px 0;
}
.totals-table tr td:last-child {
text-align: right;
font-weight: 600;
}
.totals-table .grand-total {
font-size: 18px;
color: #2563eb;
border-top: 2px solid #e2e8f0;
padding-top: 12px;
}
.footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
color: #94a3b8;
font-size: 12px;
}
@media print {
body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.invoice-container { padding: 20px; }
}
</style>
</head>
<body>
<div class="invoice-container">
<header class="invoice-header">
<div class="company-info">
<h1>Your Company</h1>
<p>123 Business Street</p>
<p>City, State 12345</p>
<p>contact@company.com</p>
</div>
<div class="invoice-details">
<h2>INVOICE</h2>
<p class="invoice-number">#INV-2025-001</p>
<p>Date: January 20, 2025</p>
<p>Due: February 20, 2025</p>
</div>
</header>
<div class="addresses">
<div class="address-block">
<h3>Bill To</h3>
<p><strong>Client Company LLC</strong></p>
<p>456 Client Avenue</p>
<p>Client City, CC 67890</p>
<p>billing@client.com</p>
</div>
<div class="address-block">
<h3>Payment Details</h3>
<p>Bank: Example Bank</p>
<p>IBAN: DE89 3704 0044 0532 0130 00</p>
<p>BIC: COBADEFFXXX</p>
</div>
</div>
<table class="items-table">
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web Development Services</td>
<td>40 hrs</td>
<td>€85.00</td>
<td class="amount">€3,400.00</td>
</tr>
<tr>
<td>UI/UX Design</td>
<td>15 hrs</td>
<td>€95.00</td>
<td class="amount">€1,425.00</td>
</tr>
<tr>
<td>Server Setup & Deployment</td>
<td>5 hrs</td>
<td>€120.00</td>
<td class="amount">€600.00</td>
</tr>
</tbody>
</table>
<div class="totals">
<table class="totals-table">
<tr>
<td>Subtotal</td>
<td>€5,425.00</td>
</tr>
<tr>
<td>VAT (19%)</td>
<td>€1,030.75</td>
</tr>
<tr class="grand-total">
<td>Total Due</td>
<td>€6,455.75</td>
</tr>
</table>
</div>
<footer class="footer">
<p>Thank you for your business!</p>
<p>Payment is due within 30 days.</p>
</footer>
</div>
</body>
</html>How to Convert to PDF
- 1Copy the HTML code above
Click the "Copy Code" button to copy the entire template to your clipboard.
- 2Customize with your details
Replace the placeholder text with your company info, client details, and line items.
- 3Open our converter tool
Go to the HTML to PDF Converter and paste your customized code.
- 4Download your PDF
Click "Generate PDF" and your professional invoice is ready to send!
Your Company
123 Business Street
City, State 12345
INVOICE
#INV-2025-001
Date: Jan 20, 2025
Due: Feb 20, 2025
Bill To
Client Company LLC
456 Client Avenue
Client City, CC 67890
Payment Details
Bank: Example Bank
IBAN: DE89 3704 ****
| Description | Qty | Price | Amount |
|---|---|---|---|
| Web Development | 40h | €85 | €3,400 |
| UI/UX Design | 15h | €95 | €1,425 |
| Server Setup | 5h | €120 | €600 |
Thank you for your business!
Payment due within 30 days.