Add a creative touch to your billing documents with this modern gradient invoice HTML template using HTML5 and CSS3. The design features abstract geometric shapes with indigo, purple, and cyan gradients, balanced by a clean white background and neatly organized invoice details.
This static invoice template suits freelancers, creative agencies, consultants, and small businesses. It includes company information, client details, an itemized billing table, fixed totals, and payment instructions. Separate HTML and CSS files make it easy to customize the content, gradient colors, and layout directly in the source code.
What you will build
You will build a responsive static invoice template with colorful gradient accents and a clear billing layout. The design includes:
Abstract gradient shapes in the top-right and bottom-left corners.
A company logo or wordmark with business contact details.
A prominent invoice heading.
Invoice number, issue date, and payment due date.
A clearly arranged client billing section.
An itemized table containing five sample service entries.
Right-aligned quantities, prices, and amounts.
Fixed subtotal, discount, and highlighted total due.
Bank details and a payment reference.
Payment terms, notes, and a signature line.
A thank-you message and billing contact information.
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.0">
<meta name="description" content="A clean, printable studio invoice with itemized services and payment details.">
<title>Invoice INV-2026-042 — Forma Studio</title>
</head>
<body>
<main class="invoice" aria-labelledby="invoice-title">
<!-- Customize corner geometry here; gradient colors live in style.css. -->
<svg class="decoration decoration-top" viewBox="0 0 320 130" aria-hidden="true" focusable="false">
<defs><linearGradient id="top-gradient" x1="0" y1="1" x2="1" y2="0"><stop class="stop-indigo"></stop><stop class="stop-purple" offset=".65"></stop><stop class="stop-cyan" offset="1"></stop></linearGradient></defs>
<rect class="gradient-top" x="110" y="-125" width="280" height="220" rx="80" transform="rotate(-32 250 0)"></rect>
<rect class="gradient-top translucent" x="155" y="-100" width="90" height="250" rx="45" transform="rotate(42 200 25)"></rect>
<path class="corner-line" d="M85 0 Q110 95 240 112 L320 112"></path>
</svg>
<svg class="decoration decoration-bottom" viewBox="0 0 320 110" aria-hidden="true" focusable="false">
<defs><linearGradient id="bottom-gradient" x1="0" y1="1" x2="1" y2="0"><stop class="stop-indigo"></stop><stop class="stop-purple" offset=".65"></stop><stop class="stop-cyan" offset="1"></stop></linearGradient></defs>
<rect class="gradient-bottom" x="-100" y="45" width="330" height="150" rx="65" transform="rotate(-25 65 120)"></rect>
<rect class="gradient-bottom translucent" x="45" y="35" width="65" height="180" rx="32" transform="rotate(-40 75 125)"></rect>
<path class="corner-line" d="M0 25 H60 Q160 25 205 110"></path>
</svg>
<!-- Customize your wordmark and business contact details. -->
<header class="invoice-header">
<div>
<div class="wordmark"><span class="brand-mark" aria-hidden="true">f.</span> forma<span class="wordmark-light">studio</span></div>
<address class="business-address">
<strong>Forma Creative Studio</strong><br>
128 West Elm Street, Suite 400<br>
Portland, OR 97205, USA<br>
hello@forma.example · +1 (503) 555-0148<br>
www.forma.example
</address>
</div>
<div class="invoice-heading">
<p class="eyebrow">DESIGN WITH PURPOSE</p>
<h1 id="invoice-title">INVOICE</h1>
<p>Thoughtful work. Lasting impact.</p>
</div>
</header>
<!-- Customize the client, invoice number, and dates. -->
<section class="billing-grid" aria-label="Billing and invoice information">
<div>
<h2>Bill To</h2>
<address><strong>Olivia Bennett</strong><br>Northline Collective<br>245 Oak Avenue, Floor 2<br>Seattle, WA 98101, USA<br>olivia@northline.example</address>
</div>
<dl class="invoice-meta">
<div><dt>Invoice number</dt><dd>INV-2026-042</dd></div>
<div><dt>Issue date</dt><dd><time datetime="2026-10-18">October 18, 2026</time></dd></div>
<div><dt>Payment due</dt><dd><time datetime="2026-11-01">November 01, 2026</time></dd></div>
</dl>
</section>
<!-- All line items and totals are manually maintained static text. -->
<section class="services" aria-labelledby="services-title">
<h2 id="services-title" class="section-label">Project services <span>USD</span></h2>
<div class="table-scroll" role="region" aria-label="Itemized services, scroll horizontally on small screens" tabindex="0">
<table>
<caption class="visually-hidden">Itemized design services, prices in US dollars</caption>
<thead><tr><th scope="col">No.</th><th scope="col">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 strategy workshop<span>Discovery, positioning & creative direction</span></th><td class="numeric">1.00</td><td class="numeric">$1,200.00</td><td class="numeric">$1,200.00</td></tr>
<tr><td>02</td><th scope="row">Visual identity design<span>Logo system, color palette & typography</span></th><td class="numeric">1.00</td><td class="numeric">$1,800.00</td><td class="numeric">$1,800.00</td></tr>
<tr><td>03</td><th scope="row">Website page design<span>Responsive layouts for key pages</span></th><td class="numeric">3.00</td><td class="numeric">$400.00</td><td class="numeric">$1,200.00</td></tr>
<tr><td>04</td><th scope="row">Social media templates<span>Reusable branded content layouts</span></th><td class="numeric">4.00</td><td class="numeric">$125.00</td><td class="numeric">$500.00</td></tr>
<tr><td>05</td><th scope="row">Project handoff<span>Final assets & implementation guide</span></th><td class="numeric">1.00</td><td class="numeric">$300.00</td><td class="numeric">$300.00</td></tr>
</tbody>
</table>
</div>
<dl class="totals" aria-label="Invoice totals">
<div><dt>Subtotal</dt><dd>$5,000.00</dd></div>
<div><dt>Discount (5%)</dt><dd>−$250.00</dd></div>
<div class="total-due"><dt>Total due <span>USD</span></dt><dd>$4,750.00</dd></div>
</dl>
</section>
<!-- Customize bank details, terms, and the authorized signatory. -->
<section class="payment-grid" aria-label="Payment details and terms">
<div>
<h2>Payment details</h2>
<dl class="bank-details">
<div><dt>Bank name</dt><dd>Example Commerce Bank</dd></div>
<div><dt>Account holder</dt><dd>Forma Creative Studio</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>
<div class="terms">
<h2>Terms & notes</h2>
<p>Payment is due within 14 days of the issue date. Please include the invoice number as your payment reference.</p>
<p>Thank you for trusting us with your vision.</p>
</div>
</section>
<footer>
<div class="closing"><div><p class="thank-you">Thank you for your business.</p><p>We look forward to creating more together.</p></div><div class="signature"><div class="signature-line"></div><strong>Alex Morgan</strong><span>Authorized signature</span></div></div>
<p class="billing-contact">Billing questions? Contact <strong>billing@forma.example</strong></p>
</footer>
</main>
</body></html>CSS source
/* Customize brand colors, typography, and spacing here. */
:root {
--navy: #202442;
--text: #424655;
--muted: #707585;
--line: #e7e8ee;
--lavender: #f2effb;
--indigo: #4544c4;
--purple: #9753dc;
--cyan: #7ddfe5;
--paper: #fff;
--canvas: #eeeff5;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--space: 8px;
--page-padding: 48px;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 20px; background: var(--canvas); color: var(--text); font: 12px/1.65 var(--font); }
.invoice { position: relative; isolation: isolate; width: 100%; max-width: 794px; min-height: 1123px; margin: auto; padding: 138px var(--page-padding) 124px; background: var(--paper); box-shadow: 0 12px 55px #20244216; }
.decoration { position: absolute; z-index: -1; pointer-events: none; width: 320px; max-width: 60%; }
.decoration-top { top: 0; right: 0; height: 130px; }
.decoration-bottom { bottom: 0; left: 0; height: 110px; }
.stop-indigo { stop-color: var(--indigo); }
.stop-purple { stop-color: var(--purple); }
.stop-cyan { stop-color: var(--cyan); }
.gradient-top { fill: url("#top-gradient"); }
.gradient-bottom { fill: url("#bottom-gradient"); }
.translucent { opacity: .35; }
.corner-line { fill: none; stroke: var(--purple); stroke-width: 1; opacity: .25; }
h1, h2, p, dl { margin: 0; }
h1, h2, strong { color: var(--navy); }
h2 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space); }
address { font-style: normal; }
.invoice-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 7px; color: var(--navy); font-size: 25px; font-weight: 750; letter-spacing: -1px; margin-bottom: 18px; }
.wordmark-light { font-weight: 400; margin-left: -4px; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--indigo); color: white; font-size: 28px; }
.business-address { font-size: 11px; line-height: 1.8; }
.invoice-heading { text-align: right; padding-top: 8px; }
.eyebrow { font-size: 8px; letter-spacing: .17em; color: var(--muted); }
h1 { font-size: 40px; line-height: 1.4; letter-spacing: .045em; font-weight: 750; margin: 6px 0; }
.invoice-heading > p:last-child { font-size: 10px; color: var(--muted); }
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0; }
.invoice-meta { padding-top: 2px; }
.invoice-meta div, .bank-details div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; margin-bottom: 7px; }
dt { color: var(--muted); }
dd { margin: 0; color: var(--navy); }
.invoice-meta dd { text-align: right; font-weight: 600; }
.section-label { display: flex; justify-content: space-between; }
.section-label span { color: var(--muted); font-size: 9px; }
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 11px; }
thead { background: var(--lavender); color: var(--navy); }
th, td { padding: 14px 10px; text-align: left; }
thead th { font-weight: 650; font-size: 10px; white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--line); }
tbody th { font-weight: 600; color: var(--navy); }
tbody th span { display: block; font-size: 9px; font-weight: 400; color: var(--muted); margin-top: 3px; }
tbody td:first-child { color: var(--muted); }
.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals { width: 290px; max-width: 100%; margin: 18px 0 28px auto; font-variant-numeric: tabular-nums; }
.totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 14px; }
.totals dd { font-weight: 600; white-space: nowrap; }
.totals .total-due { position: relative; margin-top: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--lavender); font-size: 17px; font-weight: 750; }
.total-due::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--indigo), var(--purple), var(--cyan)); border-radius: 4px 0 0 4px; }
.total-due dt { color: var(--navy); }
.total-due dt span { font-size: 8px; font-weight: 500; }
.payment-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; padding-top: 23px; border-top: 1px solid var(--line); font-size: 10px; }
.bank-details div { grid-template-columns: 96px 1fr; gap: 8px; margin-bottom: 4px; }
.terms p + p { margin-top: 8px; }
.closing { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 30px; }
.thank-you { font-size: 15px; font-weight: 650; color: var(--navy); margin-bottom: 3px; }
.closing p + p { font-size: 10px; color: var(--muted); }
.signature { width: 170px; text-align: center; font-size: 10px; }
.signature-line { border-top: 1px solid #a0a4b3; margin: 20px 0 8px; }
.signature span { display: block; font-size: 9px; color: var(--muted); }
.billing-contact { text-align: center; font-size: 9px; color: var(--muted); margin-top: 28px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
:root { --page-padding: 28px; }
body { padding: 20px 12px; }
.invoice { min-height: 0; padding-top: 112px; padding-bottom: 100px; }
.decoration { width: 260px; }
.decoration-top { height: 106px; }
.decoration-bottom { height: 90px; }
h1 { font-size: 32px; }
.wordmark { font-size: 22px; }
.billing-grid { gap: 20px; }
.payment-grid { gap: 24px; }
}
@media (max-width: 480px) {
:root { --page-padding: 20px; }
body { padding: 0; }
.invoice { box-shadow: none; padding-top: 90px; padding-bottom: 80px; }
.decoration { width: 210px; }
.decoration-top { height: 85px; }
.decoration-bottom { height: 72px; }
.invoice-header, .closing { flex-direction: column; align-items: flex-start; gap: 22px; }
.invoice-heading { text-align: left; padding: 0; }
.billing-grid, .payment-grid { grid-template-columns: 1fr; gap: 24px; }
.invoice-meta { max-width: 320px; }
.signature { align-self: flex-end; }
.billing-contact { text-align: left; }
}
/* A4: retain the complete table and allow longer customized content to paginate. */
@page { size: A4; margin: 10mm; }
@media print {
:root { --page-padding: 7mm; --muted: #505050; --navy: #111; --text: #222; --line: #aaa; }
body { padding: 0; margin: 0; background: white; font-size: 9pt; }
.invoice { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 30mm var(--page-padding) 26mm; box-shadow: none; }
.invoice-header { flex-direction: row; }
.invoice-heading { text-align: right; }
.billing-grid { grid-template-columns: 1fr 1fr; }
.payment-grid { grid-template-columns: 1.15fr 1fr; }
.closing { flex-direction: row; align-items: flex-end; }
.table-scroll { overflow: visible; }
table { min-width: 0; width: 100%; font-size: 8pt; }
th, td { padding: 11px 8px; }
thead { display: table-header-group; }
tr, .totals, .payment-grid, .closing, .billing-grid { break-inside: avoid; page-break-inside: avoid; }
h2 { break-after: avoid; }
.decoration { width: 280px; }
.decoration-top { height: 114px; }
.decoration-bottom { height: 96px; }
.brand-mark { background: none; color: #111; border: 1px solid #555; }
.total-due { border-color: #777; }
.billing-contact { text-align: center; }
}
JavaScript source
How it works
The project uses index.html for the invoice structure and style.css for its appearance, responsive layout, and print formatting. Decorative SVG shapes provide sharp gradient accents, while all invoice details and amounts are updated manually in the HTML file.
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