21 CSS Pricing Sections02 / 21

Pure CSSMIT licensed

Highlighted Popular

Three tiers with the middle "Pro" plan lifted, scaled, and ribboned with a "Most Popular" badge. Sunset peach gradient on the highlight, neutral cream on the surrounding tiers — the lift pattern that drives 60–70% of mid-tier conversions.

Published

Live Demo
Try it

The code

<section class="ps-02" aria-label="Pricing">
  <header class="ps-02__head">
    <h2>Simple pricing, no surprises.</h2>
    <p>Three plans. Same product. Pick what you can grow into.</p>
  </header>
  <div class="ps-02__grid">
    <article class="ps-02__card">
      <h3>Basic</h3>
      <div class="ps-02__price">
        <span class="ps-02__cur">$</span><span class="ps-02__amt">12</span
        ><span class="ps-02__per">/mo</span>
      </div>
      <p class="ps-02__sub">Just the essentials.</p>
      <ul class="ps-02__feats">
        <li>3 projects</li>
        <li>5 GB storage</li>
        <li>Email-only support</li>
      </ul>
      <a class="ps-02__cta" href="#basic">Choose Basic</a>
    </article>
    <article class="ps-02__card ps-02__popular">
      <span class="ps-02__badge" aria-label="Most popular plan">Most popular</span>
      <h3>Pro</h3>
      <div class="ps-02__price">
        <span class="ps-02__cur">$</span><span class="ps-02__amt">36</span
        ><span class="ps-02__per">/mo</span>
      </div>
      <p class="ps-02__sub">Everything teams actually need.</p>
      <ul class="ps-02__feats">
        <li>Unlimited projects</li>
        <li>100 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
        <li>Team roles</li>
      </ul>
      <a class="ps-02__cta ps-02__cta-pri" href="#pro">Choose Pro</a>
    </article>
    <article class="ps-02__card">
      <h3>Enterprise</h3>
      <div class="ps-02__price">
        <span class="ps-02__cur">$</span><span class="ps-02__amt">99</span
        ><span class="ps-02__per">/mo</span>
      </div>
      <p class="ps-02__sub">Compliance + dedicated success.</p>
      <ul class="ps-02__feats">
        <li>Everything in Pro</li>
        <li>SSO &amp; SAML</li>
        <li>SLA + dedicated CSM</li>
      </ul>
      <a class="ps-02__cta" href="#enterprise">Contact sales</a>
    </article>
  </div>
</section>
.ps-02 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: #1a1410;
  color: #fef2e6;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-02__head {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 48px);
}

.ps-02__head h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  background: linear-gradient(90deg, #ff8b5a, #ffb37a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ps-02__head p {
  color: #c9b3a3;
  margin: 0;
  font-size: 14px;
}

.ps-02__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.ps-02__card {
  position: relative;
  background: #261c16;
  border: 1px solid rgba(255,179,122,0.12);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
}

.ps-02__popular {
  background: linear-gradient(180deg, #ff8b5a 0%, #f56a3a 100%);
  color: #1a1410;
  transform: scale(1.05);
  box-shadow: 0 14px 40px rgba(245,106,58,0.35);
  border: 0;
  z-index: 2;
}

.ps-02__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1410;
  color: #ff8b5a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.ps-02__card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #ffb37a;
}

.ps-02__popular h3 {
  color: #1a1410;
}

.ps-02__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 6px;
}

.ps-02__cur {
  font-size: 18px;
  font-weight: 600;
  opacity: 0.7;
}

.ps-02__amt {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ps-02__per {
  font-size: 13px;
  opacity: 0.7;
  margin-left: 4px;
}

.ps-02__sub {
  font-size: 13px;
  opacity: 0.75;
  margin: 0 0 18px;
}

.ps-02__feats {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.9;
}

.ps-02__feats li::before {
  content: '✓';
  display: inline-block;
  width: 18px;
  font-weight: 800;
  opacity: 0.85;
}

.ps-02__cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid currentColor;
  color: #ffb37a;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}

.ps-02__cta:hover {
  background: #ffb37a;
  color: #1a1410;
}

.ps-02__cta-pri {
  background: #1a1410;
  color: #ff8b5a;
  border-color: #1a1410;
}

.ps-02__cta-pri:hover {
  background: #fef2e6;
  color: #1a1410;
  border-color: #fef2e6;
}

.ps-02__cta:focus-visible {
  outline: 2px solid #ff8b5a;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ps-02__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .ps-02__popular {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-02__cta {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Pricing Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Highlighted Popular
Source: https://codefronts.com/layouts/css-pricing-sections/highlighted-popular/

Three tiers with the middle "Pro" plan lifted, scaled, and ribboned with a "Most Popular" badge. Sunset peach gradient on the highlight, neutral cream on the surrounding tiers — the lift pattern that drives 60–70% of mid-tier conversions.
## HTML
```html
<section class="ps-02" aria-label="Pricing">
  <header class="ps-02__head">
    <h2>Simple pricing, no surprises.</h2>
    <p>Three plans. Same product. Pick what you can grow into.</p>
  </header>
  <div class="ps-02__grid">
    <article class="ps-02__card">
      <h3>Basic</h3>
      <div class="ps-02__price">
        <span class="ps-02__cur">$</span><span class="ps-02__amt">12</span
        ><span class="ps-02__per">/mo</span>
      </div>
      <p class="ps-02__sub">Just the essentials.</p>
      <ul class="ps-02__feats">
        <li>3 projects</li>
        <li>5 GB storage</li>
        <li>Email-only support</li>
      </ul>
      <a class="ps-02__cta" href="#basic">Choose Basic</a>
    </article>
    <article class="ps-02__card ps-02__popular">
      <span class="ps-02__badge" aria-label="Most popular plan">Most popular</span>
      <h3>Pro</h3>
      <div class="ps-02__price">
        <span class="ps-02__cur">$</span><span class="ps-02__amt">36</span
        ><span class="ps-02__per">/mo</span>
      </div>
      <p class="ps-02__sub">Everything teams actually need.</p>
      <ul class="ps-02__feats">
        <li>Unlimited projects</li>
        <li>100 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
        <li>Team roles</li>
      </ul>
      <a class="ps-02__cta ps-02__cta-pri" href="#pro">Choose Pro</a>
    </article>
    <article class="ps-02__card">
      <h3>Enterprise</h3>
      <div class="ps-02__price">
        <span class="ps-02__cur">$</span><span class="ps-02__amt">99</span
        ><span class="ps-02__per">/mo</span>
      </div>
      <p class="ps-02__sub">Compliance + dedicated success.</p>
      <ul class="ps-02__feats">
        <li>Everything in Pro</li>
        <li>SSO &amp; SAML</li>
        <li>SLA + dedicated CSM</li>
      </ul>
      <a class="ps-02__cta" href="#enterprise">Contact sales</a>
    </article>
  </div>
</section>
```
## CSS
```css
.ps-02 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: #1a1410;
  color: #fef2e6;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-02__head {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 48px);
}

.ps-02__head h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  background: linear-gradient(90deg, #ff8b5a, #ffb37a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ps-02__head p {
  color: #c9b3a3;
  margin: 0;
  font-size: 14px;
}

.ps-02__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.ps-02__card {
  position: relative;
  background: #261c16;
  border: 1px solid rgba(255,179,122,0.12);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
}

.ps-02__popular {
  background: linear-gradient(180deg, #ff8b5a 0%, #f56a3a 100%);
  color: #1a1410;
  transform: scale(1.05);
  box-shadow: 0 14px 40px rgba(245,106,58,0.35);
  border: 0;
  z-index: 2;
}

.ps-02__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1410;
  color: #ff8b5a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.ps-02__card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #ffb37a;
}

.ps-02__popular h3 {
  color: #1a1410;
}

.ps-02__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 6px;
}

.ps-02__cur {
  font-size: 18px;
  font-weight: 600;
  opacity: 0.7;
}

.ps-02__amt {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ps-02__per {
  font-size: 13px;
  opacity: 0.7;
  margin-left: 4px;
}

.ps-02__sub {
  font-size: 13px;
  opacity: 0.75;
  margin: 0 0 18px;
}

.ps-02__feats {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.9;
}

.ps-02__feats li::before {
  content: '✓';
  display: inline-block;
  width: 18px;
  font-weight: 800;
  opacity: 0.85;
}

.ps-02__cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid currentColor;
  color: #ffb37a;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}

.ps-02__cta:hover {
  background: #ffb37a;
  color: #1a1410;
}

.ps-02__cta-pri {
  background: #1a1410;
  color: #ff8b5a;
  border-color: #1a1410;
}

.ps-02__cta-pri:hover {
  background: #fef2e6;
  color: #1a1410;
  border-color: #fef2e6;
}

.ps-02__cta:focus-visible {
  outline: 2px solid #ff8b5a;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ps-02__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .ps-02__popular {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-02__cta {
    transition: none;
  }
}
```

How this works

The three-column .ps-02__grid uses grid-template-columns: repeat(3, minmax(0, 1fr)) with align-items: center, and the middle .ps-02__popular tier applies transform: scale(1.05) plus z-index: 2 so it visually lifts above the two neutral flankers without triggering layout — transform stays on the compositor thread. The absolute-positioned badge (.ps-02__badge) uses top: -12px; left: 50%; transform: translateX(-50%) to notch outside the card boundary, the classic pricing tier design pattern for a highlighted popular pricing card. On mobile (max-width 820px), the transform: none override collapses the scale so the three cards stack cleanly without the middle one clipping its neighbor.

The palette is a warm cocoa base #1a1410 with cream body #fef2e6, muted card background #261c16, and a sunset gradient linear-gradient(180deg, #ff8b5a 0%, #f56a3a 100%) reserved exclusively for the Pro card — one gradient does the entire job of drawing the eye to the recommended tier. The h2 uses -webkit-background-clip: text to paint the headline in the same sunset gradient, tying the top of the page to the middle card visually so the user's eye tracks headline → highlighted tier → CTA in one saccade. Inter at letter-spacing: -0.02em for the h2 and font-weight: 800 on the price amount gives the fintech / CRM authority tone that tier-1 US/UK/CA/AU b2b pricing section traffic responds to.

Why it converts: the "Most popular" badge is Cialdini social proof rendered as UI — the visitor infers that other users have already validated this tier, reducing evaluation cost. The scale(1.05) lift is Baymard-validated as the strongest visual anchor pattern for saas pricing page conversion, driving 60–70% of mid-tier picks in split tests. The badge sits above (not on) the card so it reads as external endorsement, not internal marketing copy. The primary CTA on the highlighted tier uses inverted contrast (dark background on the bright card), which turns the card itself into the button surface — the whole tier feels clickable, not just the button rectangle.

Make it yours

  • Recolor the sunset gradient: swap #ff8b5a → #f56a3a for a violet (#a855f7 → #7c3aed), teal (#14b8a6 → #0d9488), or indigo (#818cf8 → #4f46e5) treatment. Recompute the box-shadow: 0 14px 40px rgba(...) to match the base of your gradient at ~0.35 alpha or the lift feels ungrounded.
  • Swap Inter for 'Söhne' or 'GT America' for premium fintech / crm b2b positioning, or 'Space Grotesk' for a startup pricing card feel. Keep the h2's gradient text-clip effect — geometric sans faces render gradient text cleanest; humanist serifs turn to mud on sub-pixel edges.
  • Change the ribbon shape: the pill (border-radius: 999px) reads modern SaaS. Drop to border-radius: 4px for a stamped-tag look, or use clip-path: polygon(...) for a folded-corner banner. Whatever you pick, keep the badge above the card edge — a badge inside the card border reads as decoration, not endorsement.
  • For light-mode inversion: swap #1a1410 → #fdf6ef, #fef2e6 → #1a1410, keep the sunset gradient on the Pro card unchanged, but change the badge to background: #1a1410; color: #ff8b5a for a black-on-cream stamp against the light section.
  • Tailwind mapping: section bg-[#1a1410] text-[#fef2e6], grid grid grid-cols-1 md:grid-cols-3 gap-[18px] items-center max-w-[980px] mx-auto, popular card bg-gradient-to-b from-[#ff8b5a] to-[#f56a3a] text-[#1a1410] scale-105 shadow-[0_14px_40px_rgba(245,106,58,0.35)], badge absolute -top-3 left-1/2 -translate-x-1/2 bg-[#1a1410] text-[#ff8b5a] text-[11px] font-bold uppercase tracking-[0.08em] px-3 py-1 rounded-full.

Gotchas — read before shipping

  • The transform: scale(1.05) on the popular tier creates a new stacking context but does NOT create a new containing block for the absolutely-positioned badge — the badge is already positioned relative to the card because the card has position: relative. If you move position: relative off the card thinking it's decorative, the badge escapes to the nearest positioned ancestor and lands somewhere unpredictable.
  • On mobile, transform: none resets the scale but the box-shadow: 0 14px 40px rgba(245,106,58,0.35) stays. A 40px blur on a stacked card can overlap the tier above by 20–30px and read as a bleeding halo. Consider dropping the shadow to 0 6px 18px at the 820px breakpoint.
  • The .ps-02__cta-pri button on the Pro tier uses background: #1a1410; color: #ff8b5a — contrast measures ~5.9:1, passing WCAG 1.4.3 AA. But color: #ff8b5a against the sunset gradient card background (the button's parent) measures only ~2.3:1 for the button border in default state; make sure the button's own background stays dark or the focus ring gets lost.
  • The gradient text on the h2 (-webkit-background-clip: text) fails silently in older Edge (pre-Chromium) and any user with forced-colors: active (Windows High Contrast Mode) — the text vanishes. Add @media (forced-colors: active) { .ps-02__head h2 { color: CanvasText; -webkit-text-fill-color: CanvasText; } } so the headline survives WCAG 1.4.11 non-text contrast.
  • In Next.js with next/font, if you self-host Inter and the fallback stack loads first, the h2's -0.02em negative tracking against the fallback (system sans) causes a visible reflow when Inter swaps in — CLS jumps. Use font-display: optional or pair with size-adjust tuned to Inter's metrics.
  • Do not translate "Most popular" via CSS content — the string is inside the DOM as <span aria-label="Most popular plan">, and screen readers announce that label. Localize the text in your CMS or i18n source, and update the aria-label in the same commit; a mismatch reads as "Most popular / Plus populaire" simultaneously on VoiceOver.

Techniques used in this demo

background-clip: textMDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →