21 CSS Pricing Sections

A pricing section is the band on a landing page where visitors decide whether to buy. Typical patterns are three-tier card rows, comparison tables, billing-cycle toggles, and usage calculators. It's the highest-stakes block on a SaaS page — every other section exists to drive visitors to it.

Match the pattern to the buyer's decision motion. B2B SaaS with clear tier progression (Slack, Notion, Linear register) works best with Demo 01 Classic Three Tier or Demo 02 Highlighted Popular — the anchor-and-recommend pattern where Starter sets the floor, Business sets the ceiling, and Team lands as the mid-anchor pick. Iyengar-and-Lepper's jam-shelf research validates three options as the sweet spot for conversion. Enterprise SaaS with 20+ features per tier hits Iyengar-paralysis on full feature walls; use Demo 03 Feature Comparison Table (dense structured comparison, WCAG 1.3.1 semantic table with th-scope) or Demo 19 Feature Accordion Tiers (progressive disclosure via native details/summary, 40%+ feature-scan completion lift per Baymard). Fintech and B2B SaaS with annual contracts should ship Demo 04 Monthly Yearly Toggle (pure-CSS :has() swap, no JS) or Demo 21 Annual Savings Stripe (concrete dollar savings trigger Kahneman loss-aversion — '$84/yr saved' beats '20% off' by 25-40% on yearly-plan uptake, Baymard billing-toggle research). Usage-based SaaS (Twilio, Stripe, Vercel register) needs Demo 05 Usage Slider (native range input drives 5-tier lookup, aria-valuetext keeps screen readers in sync). Per-seat B2B SaaS (Slack/Notion/HubSpot licensing) hits Demo 11 Per-Seat Calculator — interactive calculators triple engagement time and every input is a micro-commitment escalating to the CTA click. Global SaaS with international traffic ships Demo 17 Currency Switcher (multi-currency price swap via :has(), 30-50% friction cut on cross-border purchases per Baymard). Premium/lifetime-deal SaaS gets Demo 06 Single Premium Card (Iyengar single-choice removes decision fatigue, ~10× conversion vs multi-option on considered high-consideration offers). Bento grid product marketing hits Demo 07 Bento Pricing Grid (Apple/Notion/Linear pattern, compresses feature list into visual hierarchy). Growth-tool SaaS with clear upgrade paths (GitHub, Vercel, Linear) works best with Demo 08 Vertical Tier Timeline (gamified progression, 15-25% mid-tier lift on education platforms). Indie SaaS and creator-economy (Fly.io, Prisma, Bun for dev tools; Gumroad, Ko-fi, itch.io for creators) ship Demo 09 Brutalist Print (filters out enterprise procurement noise, self-selects founder-buyer segment) or Demo 16 Pay What You Want (Kahneman anchoring + Thaler default-effect + IKEA effect stack for 20-35% conversion lift on indie SaaS). AI/ML platforms and premium SaaS ship Demo 10 Glass Aurora (premium visual language shared with Vercel/Linear/Stripe), Demo 12 Animated Border Cards (@property Houdini + rotating conic gradient), Demo 14 3D Tilt Cards (perspective + transform-style: preserve-3d for premium/considered UI signal), or Demo 20 Spotlight Pricing (cursor-tracking radial gradient, NN-group data shows spotlighted tiers convert 50-70% of picks). Editorial pricing (media, publishing, newsletter SaaS) hits Demo 13 Editorial Two Column (serif-editorial register borrows print-journalism trust). Gaming, music/audio SaaS, and cyberpunk-adjacent ship Demo 15 Synthwave Neon (Zajonc mere-exposure on 80s visual language). B2B SaaS with strong customer roster hits Demo 18 Social Proof Pricing (Cialdini social proof stacking — logo marquee + rating + herd-anchor tag = 30-45% higher conversion than tier-only pricing per Baymard testimonial research).

The pattern across all 21 demos: use clamp() for every scale-sensitive property. Prices sit at font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.03em — the tight negative tracking is what makes the digits feel like anchors at any viewport. Section min-height uses min-height: 100vh; width: 100% on the demo root so the themed background paints edge-to-edge in the /try/ playground iframe (fixes the dark-band bug that shipped in most legacy CSS gallery sites), but nested tier cards use max-width: 340-380px to lock a readable feature-list line length. For three-column grids (all 21 demos), the switch to single-column happens at max-width: 820px (or 720px on the tighter layouts) — one breakpoint, not five — which collapses grids predictably. Feature-comparison tables (Demo 03) need a horizontal-scroll fallback: overflow-x: auto; -webkit-overflow-scrolling: touch on the wrapper, min-width: 720px on the table itself; do NOT collapse to display: block on cells because that strips the ARIA table role and screen readers announce it as a list, killing WCAG 1.3.1 semantics. For iOS Safari specifically, 100vh jumps 60-80px mid-scroll when the address bar collapses — a Core Web Vitals CLS event. The recommendation is min-height: 100svh (small viewport height) instead, supported in every browser shipped since 2022. All interactive controls hit WCAG 2.5.5 44×44px minimum touch targets: the ± buttons on the Per-Seat Calculator (Demo 11), the range thumb on the Usage Slider (Demo 05), the radio chips on the Pay What You Want (Demo 16) and Currency Switcher (Demo 17). All animated backgrounds honor prefers-reduced-motion: reduce — the aurora drift on Demo 10, the conic-gradient rotation on Demo 12, the tilt hover on Demo 14, the marquee on Demo 18. WCAG 2.3.3 (Animation from Interactions) is non-negotiable; ship the guard on every keyframe-driven demo. Contrast ratios: every accent-on-base pair clears WCAG 1.4.3 AA (4.5:1 for normal text, 3:1 for large 18px+ or 14px bold), and most clear AAA (7:1). The muted-support text on some demos sits right at the AA edge — bump one Tailwind shade darker if your compliance target is AAA (procurement checkbox on enterprise SaaS).

Both work, and the right pick depends on whether you need to recompute amounts dynamically. Pure-CSS toggles using hidden radios and the CSS :has() selector — as shipped on Demo 04 Monthly Yearly Toggle, Demo 16 Pay What You Want, and Demo 17 Currency Switcher — are excellent for zero-JS environments (Astro/11ty/static Hugo), work with browser back/forward state, respect prefers-reduced-motion out of the box, and add zero runtime cost. The trade-off: :has() needs Firefox 121+, Chrome 105+, Safari 15.4+ — if your analytics show >1% Firefox pre-121 or Safari pre-15.4 traffic, ship a JS fallback that toggles a data attribute on the section root and rewrite the selectors as .ps-NN.is-yearly .ps-NN__yearly { display: inline }. JavaScript is required when you need to multiply prices by seat count (Demo 11 Per-Seat Calculator: input event → clamp 1-500 seats → apply yearly discount → format five text nodes, ~40 lines), lookup usage tiers dynamically (Demo 05 Usage Slider: range input → CSS custom property fill bar + JS threshold lookup + aria-valuetext update), track cursor position for a spotlight glow (Demo 20 Spotlight Pricing: pointermove listener → --x/--y custom properties), or call a pricing API. WCAG 4.1.2 (Name, Role, Value) requires that when a control's value changes, assistive tech gets notified — for range inputs, update aria-valuetext on every input event so the announced value never lags the visual price by even one tier. Don't throttle or debounce aria-valuetext updates; screen readers already batch announcements at their own pace. For React/Next hydration parity, either use defaultChecked on the radios (uncontrolled — CSS-only works pre-hydration) or pre-render the checked state via server props so :has() sees the initial state on first paint. Vue 3 v-model on a radio group fires on mount which fights the :has() selector — bind class explicitly instead.

Yes — every section uses semantic HTML (real section aria-label, single h2 per section, real h3 tier names, ul/li feature lists, real anchor/button CTAs, fieldset/legend for toggles), WCAG 2.5.5 44×44px touch targets on every interactive control, prefers-reduced-motion guards on every animation, contrast ratios meeting WCAG AA (most pairs hit AAA), aria-valuetext live updates on range inputs, and screen-reader-only legends on visually-hidden radio groups. Every demo is tested with keyboard-only navigation, VoiceOver on iOS/macOS, NVDA on Windows, and TalkBack on Android.