Free Pricing Page Template (HTML & CSS, 2026)
A responsive three-tier pricing page template in HTML and CSS — feature lists, a highlighted popular plan and clear CTAs — accessible and easy to customize for any product.
· 4 min read
This free pricing page template is a clean, responsive three-tier layout in plain HTML and CSS: each plan has a price, a feature list and a call-to-action, with the middle plan highlighted as "most popular." It’s accessible, dependency-free and themed with CSS variables, so you can adapt it to any product in minutes.
What you get
- Three responsive pricing cards that stack on mobile.
- A highlighted "most popular" plan to guide the choice.
- Parallel feature lists with clear check markers and per-plan CTAs.
- CSS-variable theming and zero dependencies.
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="pricing">
<header class="head">
<h1>Simple, transparent pricing</h1>
<p>Start free. Upgrade when you're ready. Cancel anytime.</p>
</header>
<div class="plans">
<section class="plan">
<h2>Starter</h2>
<p class="price"><span class="amt">$0</span>/mo</p>
<ul>
<li>1 project</li>
<li>Community support</li>
<li>1 GB storage</li>
</ul>
<a class="btn btn-ghost" href="#">Get started</a>
</section>
<section class="plan featured">
<p class="badge">Most popular</p>
<h2>Pro</h2>
<p class="price"><span class="amt">$19</span>/mo</p>
<ul>
<li>Unlimited projects</li>
<li>Priority support</li>
<li>100 GB storage</li>
<li>Team collaboration</li>
</ul>
<a class="btn btn-primary" href="#">Start free trial</a>
</section>
<section class="plan">
<h2>Business</h2>
<p class="price"><span class="amt">$49</span>/mo</p>
<ul>
<li>Everything in Pro</li>
<li>SSO & audit logs</li>
<li>1 TB storage</li>
<li>Dedicated support</li>
</ul>
<a class="btn btn-ghost" href="#">Contact sales</a>
</section>
</div>
</main>
</body>
</html>The CSS
:root {
--bg: #ffffff; --card: #ffffff; --text: #0f1522; --muted: #5b6472;
--accent: #4f46e5; --border: #e6e9f0; --ok: #16a34a; --max: 1000px;
color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg); color: var(--text); }
.pricing { max-width: var(--max); margin-inline: auto; padding: clamp(40px, 8vw, 80px) 20px; }
.head { text-align: center; margin-bottom: 44px; }
.head h1 { font-size: clamp(28px, 5vw, 42px); letter-spacing: -.02em; }
.head p { color: var(--muted); margin-top: 10px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; align-items: start; }
.plan { background: var(--card); border: 1px solid var(--border); border-radius: 18px;
padding: 30px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent); box-shadow: 0 20px 50px -24px rgba(79,70,229,.5); position: relative; }
.badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
padding: 5px 14px; border-radius: 20px; }
.plan h2 { font-size: 18px; }
.price { margin: 12px 0 20px; color: var(--muted); }
.price .amt { font-size: 40px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
li { padding-left: 26px; position: relative; color: var(--muted); }
li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.btn { margin-top: auto; text-align: center; padding: 13px; border-radius: 10px;
font-weight: 700; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn:hover { filter: brightness(1.05); }How to customize
- Plans: rename tiers, change prices, and keep feature lists parallel (each plan a superset of the one before is easiest to scan).
- Highlight: move the
featuredclass andMost popularbadge to the plan you want to steer people toward. - Billing toggle: add a monthly/yearly switch that updates the
.amtvalues with a little JavaScript. - Rebrand: change
--accentand the fonts; the highlighted plan’s glow uses the same accent color. - Connect checkout: point each CTA to your checkout flow or contact form.
Frequently asked questions
How many pricing tiers should I have?
Three is the common sweet spot: it lets you anchor with a higher tier, highlight a recommended middle plan, and offer an entry point — without overwhelming the visitor. This template uses three, with the middle "Pro" plan highlighted. Some products do well with a single plan or a free-plus-paid split; more than four tiers usually adds decision friction.
How do I highlight the recommended plan?
This template adds a
featured class to the middle plan, which gives it an accent border, a subtle shadow and a "Most popular" badge. Move that class and badge to whichever plan you want to emphasize. Visually distinguishing one option guides the choice and typically lifts conversions on that plan.Can I add a monthly/yearly billing toggle?
Yes. Add a toggle (a pair of buttons or a switch) above the plans, and use a little JavaScript to swap the
.amt price values and the "/mo" or "/yr" label when it changes. Show the yearly discount clearly, since annual billing is a common upsell.Is this pricing template accessible?
Yes. It uses semantic headings, real lists for features, sufficient color contrast, and clear focusable CTA links. The check marks are decorative CSS content, so they don’t clutter the accessibility tree, and the layout reflows to a single column on small screens for easy reading.
Edit this pricing page live in XCODX Studio. See also the landing page template, best CSS frameworks and the complete guide to CSS Grid.