This pricing card highlights the delta between plans, focusing on savings rather than absolute price.
HTML
<section class="pricing-delta">
<span class="pricing-delta__tag">Save 30%</span>
<strong class="pricing-delta__plan">Annual</strong>
</section>CSS
.pricing-delta {
width: 200px;
padding: 0.8rem;
border-radius: 18px;
background: radial-gradient(circle at top, #eef2ff, #ffffff);
box-shadow: 0 18px 36px rgba(0,0,0,0.14);
text-align: center;
}
.pricing-delta__tag {
display: inline-block;
margin-bottom: 0.25rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: #22c55e;
color: #ffffff;
font-size: 11px;
font-weight: 600;
}
.pricing-delta__plan {
font-size: 16px;
font-weight: 700;
color: #111827;
}
@media (prefers-color-scheme: dark) {
.pricing-delta {
background: radial-gradient(circle at top, #1e1b4b, #020617);
}
.pricing-delta__plan {
color: #e5e7eb;
}
}Notes
- Savings-first messaging
- High contrast tag emphasis
- Works well for upsell prompts
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.