Give your billing documents a fresh look with this modern wave invoice HTML template using HTML5 and CSS3. Flowing blue and teal wave accents frame a clean white layout, adding personality while keeping invoice details easy to read.
This static invoice template includes company information, client details, an itemized service table, fixed totals, and payment instructions. All content can be customized directly in the HTML file, while a separate CSS file controls the colors, spacing, responsive layout, and print appearance. The design suits freelancers, creative agencies, and small businesses looking for a professional invoice presentation.
What you will build
You will build a responsive static invoice template with a modern wave design and a clear billing layout. It includes:
Decorative SVG waves at the top and bottom.
A company logo or wordmark with contact details.
A prominent invoice heading and invoice information.
A client billing section.
A styled table containing five sample service items.
Fixed subtotal, discount, and total amounts.
Bank details and payment instructions.
Payment terms, a thank-you message, and a signature line.
A responsive screen layout and A4-friendly print styles.
HTML source
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A professional static invoice with elegant blue waves, clear service details, and payment information.">
<title>Invoice INV-2026-042 · Forma Studio</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<!-- Customize the SVG paths to change the decorative waves. -->
<svg class="wave wave-top" viewBox="0 0 440 180" aria-hidden="true" focusable="false">
<path fill="var(--teal)" d="M80 0H440V180C330 165 355 77 250 74S130 80 80 0Z"></path>
<path fill="var(--blue)" d="M150 0H440V145C350 130 365 45 275 48S190 54 150 0Z"></path>
<path fill="var(--navy)" d="M230 0H440V104C370 93 382 27 310 30S260 30 230 0Z"></path>
</svg>
<!-- Customize company details and wordmark. -->
<header class="header">
<div>
<div class="wordmark"><span class="logo-mark" aria-hidden="true">f.</span>forma<span class="wordmark-dot">.</span></div>
<address>
<strong>Forma Studio LLC</strong><br>
128 Westbrook Avenue, Suite 204<br>
Portland, OR 97205, USA<br>
hello@forma.example<br>
+1 (503) 555-0148
</address>
</div>
<div class="invoice-heading">
<p class="eyebrow">Design. Build. Inspire.</p>
<h1 id="invoice-title">INVOICE</h1>
<p class="invoice-number">INV-2026-042</p>
</div>
</header>
<!-- Customize client details, invoice number, and dates. -->
<section class="details" aria-label="Billing and invoice details">
<div>
<h2>Invoice to</h2>
<address>
<strong>Alex Morgan</strong><br>
Northline Creative Co.<br>
42 Market Street<br>
Seattle, WA 98101, USA<br>
alex@northline.example
</address>
</div>
<dl class="metadata">
<div><dt>Invoice number</dt><dd>INV-2026-042</dd></div>
<div><dt>Issue date</dt><dd><time datetime="2026-10-17">Oct 17, 2026</time></dd></div>
<div><dt>Payment due</dt><dd><time datetime="2026-10-31">Oct 31, 2026</time></dd></div>
<div><dt>Currency</dt><dd>USD — US Dollar</dd></div>
</dl>
</section>
<!-- Edit services and all amounts manually; no calculations run. -->
<section aria-labelledby="services-title">
<h2 id="services-title">Services provided</h2>
<div class="table-scroll" role="region" aria-label="Invoice services; scroll horizontally on small screens" tabindex="0">
<table>
<caption class="visually-hidden">Five services billed in US dollars</caption>
<thead><tr><th scope="col">No.</th><th scope="col">Service description</th><th scope="col" class="numeric">Qty</th><th scope="col" class="numeric">Unit price</th><th scope="col" class="numeric">Amount</th></tr></thead>
<tbody>
<tr><td>01</td><th scope="row">Brand discovery<span>Research & creative direction</span></th><td class="numeric">1</td><td class="numeric">$600.00</td><td class="numeric">$600.00</td></tr>
<tr><td>02</td><th scope="row">Visual identity design<span>Logo system & brand palette</span></th><td class="numeric">1</td><td class="numeric">$1,200.00</td><td class="numeric">$1,200.00</td></tr>
<tr><td>03</td><th scope="row">Website page design<span>Responsive page layouts</span></th><td class="numeric">3</td><td class="numeric">$350.00</td><td class="numeric">$1,050.00</td></tr>
<tr><td>04</td><th scope="row">Social media templates<span>Reusable branded graphics</span></th><td class="numeric">5</td><td class="numeric">$60.00</td><td class="numeric">$300.00</td></tr>
<tr><td>05</td><th scope="row">Brand guidelines<span>Digital handoff & usage guide</span></th><td class="numeric">1</td><td class="numeric">$350.00</td><td class="numeric">$350.00</td></tr>
</tbody>
</table>
</div>
</section>
<section class="settlement" aria-label="Payment details and invoice totals">
<!-- Replace sample bank details before sending. -->
<div class="payment">
<h2>Payment information</h2>
<dl class="bank-details">
<div><dt>Bank</dt><dd>Example Business Bank</dd></div>
<div><dt>Account holder</dt><dd>Forma Studio LLC</dd></div>
<div><dt>Account number</dt><dd>0000 1234 5678</dd></div>
<div><dt>Reference</dt><dd>INV-2026-042</dd></div>
</dl>
</div>
<dl class="summary">
<div><dt>Subtotal</dt><dd>$3,500.00</dd></div>
<div><dt>Discount (10%)</dt><dd>−$350.00</dd></div>
<div class="total"><dt>Total due <small>USD</small></dt><dd>$3,150.00</dd></div>
</dl>
</section>
<!-- Customize payment terms, notes, and signatory. -->
<footer class="closing">
<div class="notes">
<h2>Terms & notes</h2>
<p>Payment is due within 14 days of the issue date. Please include the invoice number with your bank transfer.</p>
<p>All services have been delivered as agreed. For billing questions, contact hello@forma.example.</p>
<p class="thanks">Thank you for your business.</p>
</div>
<div class="signature"><div class="signature-line"></div><strong>Jamie Taylor</strong><span>Authorized signature</span></div>
</footer>
<svg class="wave wave-bottom" viewBox="0 0 440 180" aria-hidden="true" focusable="false">
<path fill="var(--teal)" d="M0 0C110 15 85 103 190 106S310 100 360 180H0Z"></path>
<path fill="var(--blue)" d="M0 35C90 50 75 135 165 132S250 126 290 180H0Z"></path>
<path fill="var(--navy)" d="M0 76C70 87 58 153 130 150S180 150 210 180H0Z"></path>
</svg>
</main>
</body></html>CSS source
/* Customize the palette, type, and spacing here. */
:root {
--navy: #132b4b;
--blue: #255fcd;
--teal: #28aaa9;
--ink: #25364c;
--muted: #647184;
--line: #dfe5ec;
--stripe: #f4f7fb;
--paper: #fff;
--canvas: #e9eef4;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--page-padding: 17mm;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 36px 16px; background: var(--canvas); color: var(--ink); font: 13px/1.6 var(--font); }
.invoice { position: relative; isolation: isolate; width: 100%; max-width: 210mm; min-height: 297mm; margin: auto; padding: 44mm var(--page-padding) 40mm; background: var(--paper); box-shadow: 0 12px 48px #132b4b18; }
.wave { position: absolute; z-index: -1; display: block; width: 112mm; height: 46mm; pointer-events: none; }
.wave-top { top: 0; right: 0; }
.wave-bottom { bottom: 0; left: 0; }
.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; margin-bottom: var(--space-2); color: var(--navy); font-size: 34px; font-weight: 750; letter-spacing: -1.5px; line-height: 1; }
.logo-mark { display: grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 10px 10px 10px 2px; background: var(--navy); color: white; font-size: 30px; }
.wordmark-dot { color: var(--teal); }
address { font-style: normal; color: var(--muted); }
address strong { color: var(--ink); font-weight: 650; }
.invoice-heading { text-align: right; }
.eyebrow { margin: 0 0 var(--space-1); color: var(--muted); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
h1 { margin: 0; color: var(--navy); font-size: 42px; line-height: 1.15; letter-spacing: 3px; }
.invoice-number { margin: 10px 0 0; color: var(--blue); font-weight: 650; letter-spacing: 1px; }
h2 { margin: 0 0 12px; color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: 1.3px; text-transform: uppercase; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-4) 0; }
dl { margin: 0; }
dd { margin: 0; }
.metadata { align-self: center; }
.metadata > div, .bank-details > div, .summary > div { display: flex; justify-content: space-between; gap: 12px; }
.metadata > div { padding: 4px 0; }
dt { color: var(--muted); }
.metadata dd { text-align: right; font-weight: 600; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12px; }
thead { background: var(--navy); color: white; }
th, td { padding: 14px 10px; text-align: left; }
thead th { font-size: 10px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; border-bottom: 2px solid var(--navy); }
tbody tr { border-bottom: 1px solid var(--line); }
tbody tr:nth-child(even) { background: var(--stripe); }
tbody th { font-weight: 650; }
tbody th span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; }
tbody td:first-child { color: var(--muted); }
.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.settlement { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.bank-details { font-size: 11px; }
.bank-details > div { justify-content: flex-start; padding: 3px 0; }
.bank-details dt { flex: 0 0 96px; }
.bank-details dd { overflow-wrap: anywhere; }
.summary > div { padding: 9px 12px; }
.summary dd { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary .total { align-items: center; margin-top: 8px; padding: 14px 12px; border: 1px solid var(--blue); background: var(--blue); color: white; }
.total dt { color: inherit; font-weight: 650; }
.total small { display: block; font-size: 9px; letter-spacing: 1px; }
.total dd { font-size: 23px; line-height: 1.2; }
.closing { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.notes p { margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.notes .thanks { margin: 18px 0 0; color: var(--navy); font-size: 14px; font-weight: 650; }
.signature { text-align: center; font-size: 11px; }
.signature-line { margin: 30px 12px 10px; border-top: 1px solid var(--muted); }
.signature span { display: block; color: var(--muted); font-size: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media screen and (max-width: 700px) {
body { padding: 16px; }
.invoice { --page-padding: 24px; min-height: auto; padding-top: 145px; padding-bottom: 150px; }
.wave { width: 320px; max-width: 90%; height: auto; }
h1 { font-size: 32px; }
.header { align-items: flex-start; }
.eyebrow { max-width: 145px; margin-left: auto; }
.settlement { gap: var(--space-2); }
}
@media screen and (max-width: 520px) {
body { padding: 0; }
.invoice { --page-padding: 20px; }
.header, .details, .settlement, .closing { display: flex; flex-direction: column; gap: var(--space-3); }
.invoice-heading { text-align: left; }
.eyebrow { max-width: none; }
.metadata { width: 100%; }
.payment, .summary { width: 100%; }
.signature { width: 190px; align-self: flex-end; }
}
/* Print on A4 at 100% scale. SVG waves remain vector artwork. */
@page { size: A4 portrait; margin: 10mm; }
@media print {
body { padding: 0; background: white; font-size: 11px; }
.invoice { --page-padding: 7mm; width: 100%; max-width: none; min-height: 276mm; padding-top: 31mm; padding-bottom: 31mm; box-shadow: none; }
.wave { width: 76mm; height: 31mm; }
.header { padding-bottom: 6mm; }
.details { padding: 6mm 0; }
.table-scroll { overflow: visible; }
table { min-width: 0; font-size: 10px; }
th, td { padding: 10px 8px; }
thead { display: table-header-group; }
/* Dark text stays legible when the print dialog disables backgrounds. */
thead th { background: var(--stripe); color: var(--navy); }
.summary .total { background: var(--stripe); color: var(--navy); border: 2px solid var(--blue); }
tr, .header, .details, .settlement, .closing { break-inside: avoid; page-break-inside: avoid; }
.settlement, .closing { margin-top: 6mm; }
.closing { padding-top: 5mm; }
}
JavaScript source
How it works
The project uses index.html for the invoice structure and style.css for its visual design. Business details, invoice items, and amounts are updated manually in the source code.
Try a change
Choose Edit code, make a small change, then press Run to preview it.
Use the source Copy buttons, choose Edit code to open the editor, or Download ZIP to save the project after a six-second countdown.
Discussion (0)
Leave a comment