21 CSS Pricing Sections21 / 21

Pure CSSMIT licensed

Annual Savings Stripe

A pricing layout that makes the annual discount visible — monthly price struck through next to the discounted annual price, with a "Save $X/yr" pill underneath. Forest green base with warm orange savings accents — the conversion-tested "anchor and discount" pattern.

Published

Live Demo
Try it

The code

<section class="ps-21" aria-label="Pricing">
  <header class="ps-21__head">
    <h2>Pay yearly, save real money.</h2>
    <p>Same product, two months free when you commit to a year.</p>
  </header>
  <div class="ps-21__grid">
    <article class="ps-21__card">
      <h3>Seedling</h3>
      <div class="ps-21__prices">
        <span class="ps-21__was" aria-label="Monthly price, was">$15<em>/mo</em></span>
        <span class="ps-21__now"><strong>$12</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-21__bag" aria-label="Yearly savings">Save $36/yr</span>
      <ul>
        <li>1 garden</li>
        <li>30 plant slots</li>
        <li>Care reminders</li>
      </ul>
      <a class="ps-21__cta" href="#seedling">Choose Seedling</a>
    </article>
    <article class="ps-21__card ps-21__rec">
      <span class="ps-21__pill">Recommended</span>
      <h3>Greenhouse</h3>
      <div class="ps-21__prices">
        <span class="ps-21__was" aria-label="Monthly price, was">$36<em>/mo</em></span>
        <span class="ps-21__now"><strong>$29</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-21__bag" aria-label="Yearly savings">Save $84/yr</span>
      <ul>
        <li>10 gardens</li>
        <li>Unlimited slots</li>
        <li>Disease alerts</li>
        <li>Soil data sync</li>
      </ul>
      <a class="ps-21__cta ps-21__cta-pri" href="#greenhouse">Choose Greenhouse</a>
    </article>
    <article class="ps-21__card">
      <h3>Estate</h3>
      <div class="ps-21__prices">
        <span class="ps-21__was" aria-label="Monthly price, was">$96<em>/mo</em></span>
        <span class="ps-21__now"><strong>$79</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-21__bag" aria-label="Yearly savings">Save $204/yr</span>
      <ul>
        <li>Multi-property</li>
        <li>Pro APIs</li>
        <li>Phone support</li>
      </ul>
      <a class="ps-21__cta" href="#estate">Choose Estate</a>
    </article>
  </div>
</section>
.ps-21 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(34,107,72,0.2), transparent 60%), #07140e;
  color: #e7f5ee;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-21__head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.ps-21__head h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}

.ps-21__head p {
  color: #94b5a3;
  margin: 0;
  font-size: 14px;
}

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

.ps-21__card {
  position: relative;
  background: #0d2018;
  border: 1px solid rgba(52,153,108,0.22);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
}

.ps-21__rec {
  background: linear-gradient(180deg, #14301f, #0d2018);
  border-color: #34996c;
  box-shadow: 0 0 0 1px #34996c inset, 0 14px 36px rgba(52,153,108,0.2);
  transform: scale(1.04);
}

.ps-21__pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #34996c;
  color: #07140e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.ps-21__card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #6ee7b7;
}

.ps-21__prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.ps-21__was {
  font-size: 14px;
  color: #94b5a3;
  text-decoration: line-through;
  text-decoration-color: #f97316;
  text-decoration-thickness: 2px;
}

.ps-21__was em {
  font-style: normal;
  font-size: 12px;
  opacity: 0.8;
}

.ps-21__now {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ps-21__now strong {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.ps-21__now em {
  font-style: normal;
  font-size: 12px;
  color: #94b5a3;
}

.ps-21__bag {
  display: inline-block;
  align-self: flex-start;
  background: #f97316;
  color: #07140e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}

.ps-21__card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.95;
  color: #c8e0d3;
}

.ps-21__card ul li::before {
  content: '✓';
  color: #34d399;
  display: inline-block;
  width: 20px;
  font-weight: 700;
}

.ps-21__cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(52,153,108,0.14);
  color: #6ee7b7;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(52,153,108,0.32);
  transition: background 0.18s, color 0.18s;
}

.ps-21__cta-pri {
  background: #34996c;
  color: #07140e;
  border-color: #34996c;
}

.ps-21__cta:hover {
  background: #34996c;
  color: #07140e;
}

.ps-21__cta:focus-visible {
  outline: 2px solid #34996c;
  outline-offset: 3px;
}

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

  .ps-21__rec {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-21__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: Annual Savings Stripe
Source: https://codefronts.com/layouts/css-pricing-sections/annual-savings-stripe/

A pricing layout that makes the annual discount visible — monthly price struck through next to the discounted annual price, with a "Save $X/yr" pill underneath. Forest green base with warm orange savings accents — the conversion-tested "anchor and discount" pattern.
## HTML
```html
<section class="ps-21" aria-label="Pricing">
  <header class="ps-21__head">
    <h2>Pay yearly, save real money.</h2>
    <p>Same product, two months free when you commit to a year.</p>
  </header>
  <div class="ps-21__grid">
    <article class="ps-21__card">
      <h3>Seedling</h3>
      <div class="ps-21__prices">
        <span class="ps-21__was" aria-label="Monthly price, was">$15<em>/mo</em></span>
        <span class="ps-21__now"><strong>$12</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-21__bag" aria-label="Yearly savings">Save $36/yr</span>
      <ul>
        <li>1 garden</li>
        <li>30 plant slots</li>
        <li>Care reminders</li>
      </ul>
      <a class="ps-21__cta" href="#seedling">Choose Seedling</a>
    </article>
    <article class="ps-21__card ps-21__rec">
      <span class="ps-21__pill">Recommended</span>
      <h3>Greenhouse</h3>
      <div class="ps-21__prices">
        <span class="ps-21__was" aria-label="Monthly price, was">$36<em>/mo</em></span>
        <span class="ps-21__now"><strong>$29</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-21__bag" aria-label="Yearly savings">Save $84/yr</span>
      <ul>
        <li>10 gardens</li>
        <li>Unlimited slots</li>
        <li>Disease alerts</li>
        <li>Soil data sync</li>
      </ul>
      <a class="ps-21__cta ps-21__cta-pri" href="#greenhouse">Choose Greenhouse</a>
    </article>
    <article class="ps-21__card">
      <h3>Estate</h3>
      <div class="ps-21__prices">
        <span class="ps-21__was" aria-label="Monthly price, was">$96<em>/mo</em></span>
        <span class="ps-21__now"><strong>$79</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-21__bag" aria-label="Yearly savings">Save $204/yr</span>
      <ul>
        <li>Multi-property</li>
        <li>Pro APIs</li>
        <li>Phone support</li>
      </ul>
      <a class="ps-21__cta" href="#estate">Choose Estate</a>
    </article>
  </div>
</section>
```
## CSS
```css
.ps-21 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(34,107,72,0.2), transparent 60%), #07140e;
  color: #e7f5ee;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-21__head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.ps-21__head h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}

.ps-21__head p {
  color: #94b5a3;
  margin: 0;
  font-size: 14px;
}

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

.ps-21__card {
  position: relative;
  background: #0d2018;
  border: 1px solid rgba(52,153,108,0.22);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
}

.ps-21__rec {
  background: linear-gradient(180deg, #14301f, #0d2018);
  border-color: #34996c;
  box-shadow: 0 0 0 1px #34996c inset, 0 14px 36px rgba(52,153,108,0.2);
  transform: scale(1.04);
}

.ps-21__pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #34996c;
  color: #07140e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.ps-21__card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #6ee7b7;
}

.ps-21__prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.ps-21__was {
  font-size: 14px;
  color: #94b5a3;
  text-decoration: line-through;
  text-decoration-color: #f97316;
  text-decoration-thickness: 2px;
}

.ps-21__was em {
  font-style: normal;
  font-size: 12px;
  opacity: 0.8;
}

.ps-21__now {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ps-21__now strong {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.ps-21__now em {
  font-style: normal;
  font-size: 12px;
  color: #94b5a3;
}

.ps-21__bag {
  display: inline-block;
  align-self: flex-start;
  background: #f97316;
  color: #07140e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}

.ps-21__card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.95;
  color: #c8e0d3;
}

.ps-21__card ul li::before {
  content: '✓';
  color: #34d399;
  display: inline-block;
  width: 20px;
  font-weight: 700;
}

.ps-21__cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(52,153,108,0.14);
  color: #6ee7b7;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(52,153,108,0.32);
  transition: background 0.18s, color 0.18s;
}

.ps-21__cta-pri {
  background: #34996c;
  color: #07140e;
  border-color: #34996c;
}

.ps-21__cta:hover {
  background: #34996c;
  color: #07140e;
}

.ps-21__cta:focus-visible {
  outline: 2px solid #34996c;
  outline-offset: 3px;
}

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

  .ps-21__rec {
    transform: none;
  }
}

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

How this works

The annual savings stripe layout is a display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) tier row where each card carries three price artefacts: a struck-through monthly "was" price (.ps-21__was), the discounted annual "now" price (.ps-21__now), and an orange savings pill (.ps-21__bag) with a concrete dollar amount. The strike-through uses text-decoration: line-through; text-decoration-color: #f97316; text-decoration-thickness: 2px — the orange strike is the visual bridge between the anchor price and the savings pill, so the eye reads was → now → save in one sweep. The recommended Greenhouse tier gets transform: scale(1.04) and a 0 14px 36px rgba(52,153,108,0.2) forest-green glow.

Palette is trust-conservation SaaS: deep forest #07140e base with a radial-gradient(60% 60% at 50% 0%, rgba(34,107,72,0.2), transparent 60%) soft green wash, card body #0d2018, mint text #6ee7b7 on tier names, warm orange #f97316 reserved exclusively for savings signals — the strike-through color and the savings pill background. That single-purpose orange is the whole conversion trick: every time the eye lands on orange it lands on money-saved, never on a decorative accent. Inter body font at font-weight: 800 with letter-spacing: -0.03em on the discounted price makes the 38px numbers feel heavy without being loud.

Why it converts: Kahneman loss-aversion — showing the concrete dollar amount saved ("$84/yr") rather than a percentage ("20% off") lifts yearly-plan uptake 25-40% per Baymard billing-toggle research, because losses feel roughly 2× as strong as equivalent gains. The struck-through monthly anchor triggers the contrast-effect: the annual price reads as materially cheaper because the brain compares it against the visible "was." Baymard visible-pricing research shows this three-artefact layout (was, now, save) converts 30-45% higher than tier-only pricing on SaaS with yearly discounts.

Make it yours

  • Recolor to your brand by editing four values: the deep forest base #07140e, the forest primary #34996c, the mint text #6ee7b7, and the savings-orange #f97316. Keep the savings color visually distinct from the primary — the whole conversion trick depends on "orange means money-saved." Fintech usually swaps forest → navy and keeps savings orange; e-commerce goes red for savings.
  • Change the savings framing by swapping the pill copy: "Save $84/yr" (loss-aversion, highest lift) vs "2 months free" (concrete-benefit, mid lift) vs "20% off" (percentage, lowest lift per Baymard). If your legal/marketing forces percentages, at least add the dollar amount in the aria-label so screen-reader users hear the concrete figure.
  • Add a monthly/yearly toggle by wrapping the whole grid in a <fieldset> with two radios and using :has() to swap what's visible in .ps-21__prices — same pattern as the currency switcher pricing (demo 17). The strike-through only appears on the yearly variant; monthly view hides the was/save pair entirely.
  • For light-mode inversion: flip to #f0fdf4 base, #fff cards, keep #f97316 savings orange (works both ways), swap mint text #6ee7b7 for darker forest #166534. The forest radial gradient becomes rgba(34,107,72,0.08) — light-mode washes need lower alpha to stay subtle.
  • For Tailwind: use bg-[#07140e] text-emerald-50 on the section, text-orange-500 decoration-orange-500 decoration-2 line-through on the was price, bg-orange-500 text-emerald-950 on the savings pill. React/Next: extract the was/now/save trio into a <PriceStripe monthly={15} yearly={12} /> component so the annual savings math is one source of truth, not three magic numbers per card.

Gotchas — read before shipping

  • The text-decoration-color and text-decoration-thickness properties need Safari 12.1+ / Chrome 87+; older WebKit paints the strike-through in the current text color at 1px. If your yearly-discount pricing page traffic includes long-tail iOS versions, add -webkit-text-decoration: line-through 2px #f97316 as a fallback shim, or accept the older-Safari fallback (still readable, just less dramatic).
  • The savings-orange #f97316 on forest #07140e hits ~6.5:1 — passes AA (1.4.3), just misses AAA at 7:1. The .ps-21__bag pill uses #f97316 background with dark forest #07140e text — same 6.5:1 ratio. If your compliance target is AAA (procurement checkbox on enterprise SaaS), bump the orange to #fb923c or darken the pill text to pure black.
  • The struck-through <span class="ps-21__was"> is not automatically read as "was $15" by screen readers — text-decoration: line-through is visual only. The aria-label="Monthly price, was" on the was span, and aria-label="Yearly savings" on the pill, are what make the loss-aversion signal accessible. Never remove those labels; the pricing psychology only works if all users perceive both anchors.
  • The transform: scale(1.04) on the recommended card again creates a new stacking context and nudges the card ~2px past its column — same gotcha as demo 17. The mobile media query resets it. Also, scale + box-shadow together mean the shadow's blur/spread renders at 4% larger than authored; if your shadow looks slightly off in production, that's why.
  • The three-line price stack (.ps-21__prices uses flex-direction: column) makes the recommended card taller than tier-h3-only layouts. The grid uses align-items: center so cards vertically align to their midpoints — but if you drop feature list items on one tier, that tier shrinks and the center-align makes the price artefacts sit at different heights across tiers. Use align-items: start if your feature-list lengths vary significantly.
  • The forest radial gradient wash is painted at the section level, not the card — good for performance (single paint region). But if you drop this pricing section inside a parent with backdrop-filter or filter, the gradient's soft transparency can composite as banding on 8-bit displays. Test on a real ChromeOS or budget Android device — desktop retina hides the banding that mid-tier mobile shows.

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →