Create a stunning modern UI HTML price comparison chart with responsive pricing cards, feature comparison tables, monthly/yearly pricing toggle, glassmorphism effects, hover animations, and fully customizable pricing plans using pure HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Modern Pricing Comparison</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--bg:#0f172a;
--card:#111827;
--primary:#7c3aed;
--primary-light:#8b5cf6;
--text:#f8fafc;
--muted:#94a3b8;
--border:rgba(255,255,255,0.08);
--success:#10b981;
--danger:#ef4444;
--shadow:0 10px 30px rgba(0,0,0,0.35);
}
body{
font-family: Inter, sans-serif;
background:
radial-gradient(circle at top left,#312e81 0%,transparent 30%),
radial-gradient(circle at bottom right,#4c1d95 0%,transparent 30%),
var(--bg);
min-height:100vh;
color:var(--text);
display:flex;
justify-content:center;
align-items:center;
padding:60px 20px;
}
.wrapper{
width:100%;
max-width:1300px;
}
.title{
text-align:center;
margin-bottom:18px;
font-size:48px;
font-weight:800;
letter-spacing:-1px;
}
.subtitle{
text-align:center;
color:var(--muted);
margin-bottom:60px;
font-size:18px;
}
.toggle-container{
display:flex;
justify-content:center;
margin-bottom:40px;
}
.toggle{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:999px;
padding:6px;
display:flex;
gap:6px;
backdrop-filter: blur(10px);
}
.toggle button{
border:none;
padding:12px 24px;
border-radius:999px;
background:transparent;
color:var(--muted);
cursor:pointer;
transition:0.3s;
font-weight:600;
}
.toggle button.active{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:white;
box-shadow:0 5px 20px rgba(124,58,237,0.4);
}
.pricing-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.card{
position:relative;
background:rgba(17,24,39,0.85);
border:1px solid var(--border);
border-radius:28px;
padding:36px 30px;
overflow:hidden;
transition:0.4s ease;
backdrop-filter: blur(14px);
box-shadow:var(--shadow);
}
.card:hover{
transform:translateY(-12px);
border-color:rgba(139,92,246,0.5);
}
.card.popular{
border:2px solid var(--primary-light);
transform:scale(1.04);
}
.badge{
position:absolute;
top:20px;
right:-40px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
color:white;
padding:10px 50px;
font-size:12px;
transform:rotate(45deg);
font-weight:700;
letter-spacing:1px;
}
.plan{
font-size:26px;
font-weight:700;
margin-bottom:12px;
}
.desc{
color:var(--muted);
margin-bottom:30px;
line-height:1.6;
}
.price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:30px;
}
.price h2{
font-size:60px;
line-height:1;
}
.price span{
color:var(--muted);
margin-bottom:10px;
}
.features{
list-style:none;
margin-bottom:35px;
}
.features li{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,0.05);
color:#e2e8f0;
}
.check{
color:var(--success);
font-weight:bold;
}
.cross{
color:var(--danger);
font-weight:bold;
}
.btn{
width:100%;
border:none;
padding:16px;
border-radius:16px;
background:rgba(255,255,255,0.06);
color:white;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:0.3s;
border:1px solid rgba(255,255,255,0.08);
}
.btn:hover{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
transform:scale(1.02);
}
.popular .btn{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
}
.save{
display:inline-block;
background:rgba(16,185,129,0.15);
color:#34d399;
padding:6px 12px;
border-radius:999px;
font-size:13px;
margin-left:10px;
font-weight:600;
}
.comparison-table{
margin-top:80px;
overflow-x:auto;
background:rgba(17,24,39,0.7);
border-radius:24px;
border:1px solid var(--border);
backdrop-filter: blur(14px);
padding:20px;
}
table{
width:100%;
border-collapse:collapse;
min-width:700px;
}
th,td{
padding:20px;
text-align:center;
}
th{
color:white;
font-size:18px;
background:rgba(255,255,255,0.03);
}
td{
border-top:1px solid rgba(255,255,255,0.05);
color:#cbd5e1;
}
tr:hover{
background:rgba(255,255,255,0.03);
}
@media(max-width:768px){
.title{
font-size:36px;
}
.card.popular{
transform:none;
}
.pricing-grid{
gap:20px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1 class="title">Simple Transparent Pricing</h1>
<p class="subtitle">
Choose the perfect plan for your business.
</p>
<div class="toggle-container">
<div class="toggle">
<button class="active" id="monthlyBtn">Monthly</button>
<button id="yearlyBtn">
Yearly
</button>
</div>
</div>
<div class="pricing-grid">
<!-- STARTER -->
<div class="card">
<h3 class="plan">Starter</h3>
<p class="desc">
Perfect for individuals and small projects.
</p>
<div class="price">
<h2 data-monthly="19" data-yearly="12">$19</h2>
<span>/month</span>
</div>
<ul class="features">
<li>1 Website <span class="check">✔</span></li>
<li>10 GB Storage <span class="check">✔</span></li>
<li>Email Support <span class="check">✔</span></li>
<li>Analytics <span class="cross">✖</span></li>
<li>Custom Domain <span class="cross">✖</span></li>
</ul>
<button class="btn">Get Started</button>
</div>
<!-- PRO -->
<div class="card popular">
<div class="badge">POPULAR</div>
<h3 class="plan">Professional</h3>
<p class="desc">
Best for growing startups and businesses.
</p>
<div class="price">
<h2 data-monthly="49" data-yearly="35">$49</h2>
<span>/month</span>
</div>
<div class="save">Save 30%</div>
<ul class="features">
<li>10 Websites <span class="check">✔</span></li>
<li>100 GB Storage <span class="check">✔</span></li>
<li>Priority Support <span class="check">✔</span></li>
<li>Advanced Analytics <span class="check">✔</span></li>
<li>Custom Domain <span class="check">✔</span></li>
</ul>
<button class="btn">Start Free Trial</button>
</div>
<!-- ENTERPRISE -->
<div class="card">
<h3 class="plan">Enterprise</h3>
<p class="desc">
Advanced features for large organizations.
</p>
<div class="price">
<h2 data-monthly="99" data-yearly="79">$99</h2>
<span>/month</span>
</div>
<ul class="features">
<li>Unlimited Websites <span class="check">✔</span></li>
<li>Unlimited Storage <span class="check">✔</span></li>
<li>Dedicated Support <span class="check">✔</span></li>
<li>AI Insights <span class="check">✔</span></li>
<li>Custom Integrations <span class="check">✔</span></li>
</ul>
<button class="btn">Contact Sales</button>
</div>
</div>
<!-- COMPARISON TABLE -->
<div class="comparison-table">
<table>
<thead>
<tr>
<th>Features</th>
<th>Starter</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Storage</td>
<td>10 GB</td>
<td>100 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Users</td>
<td>1 User</td>
<td>10 Users</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Analytics</td>
<td>Basic</td>
<td>Advanced</td>
<td>AI Powered</td>
</tr>
<tr>
<td>Support</td>
<td>Email</td>
<td>Priority</td>
<td>24/7 Dedicated</td>
</tr>
<tr>
<td>API Access</td>
<td>✖</td>
<td>✔</td>
<td>✔</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const monthlyBtn = document.getElementById('monthlyBtn');
const yearlyBtn = document.getElementById('yearlyBtn');
const prices = document.querySelectorAll('.price h2');
monthlyBtn.addEventListener('click', () => {
monthlyBtn.classList.add('active');
yearlyBtn.classList.remove('active');
prices.forEach(price => {
price.innerText = '$' + price.dataset.monthly;
});
});
yearlyBtn.addEventListener('click', () => {
yearlyBtn.classList.add('active');
monthlyBtn.classList.remove('active');
prices.forEach(price => {
price.innerText = '$' + price.dataset.yearly;
});
});
</script>
</body>
</html>