CSS Pricing Table Generator

Skeleton structure

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

Responsive three-column grid

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit + minmax(240px, 1fr) gives a three-column layout on desktop and a single-column stack on mobile, with nothing else to configure.

The featured plan

Visual cues that draw attention:

• Coloured border matching brand accent.
• Slightly lifted with negative margin-top or translateY(-4px).
• Larger CTA button, often in the brand colour vs. outlined for other plans.
• Badge (“Most popular”, “Best value”) absolutely positioned at the top.
• Possibly taller to draw the eye, though this can hurt comparability.

Do not do all of the above, pick two or three. Too many cues flatten the hierarchy.

Monthly / annual toggle

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

The toggle usually swaps price values via a bit of JavaScript or uses :checked state on a radio. Display the discount percent or dollar savings in the toggle label, it is the single most persuasive element in many tables.

Feature row styling

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Use check marks for “included”, greyed-out text or a light cross for “not included”, never cross out the text itself without reducing contrast, or it reads as emphasis.

Keep the CTA prominent

One CTA per plan, visually consistent across plans. Different copy per plan (“Start free”, “Go Pro”, “Talk to sales”) is fine and actually helpful for guiding users into the right flow.

Make it scannable

Users rarely read pricing tables left-to-right; they scan prices first, then CTAs, then feature diffs. Optimise for that:

1. Plan name + price large, top of card.
2. CTA visible without scrolling the card.
3. Feature list below. Highlight differences between plans rather than repeating identical features everywhere.

Accessibility checklist

• Each plan is an <article> with its own <h3>.
• The “Most popular” badge is a visible text badge, not colour alone (colour-blind users).
• CTA buttons have descriptive text (“Start Pro trial”) rather than “Click here.”
• The billing toggle has aria-pressed or radio semantics.
• Price changes on toggle announce via aria-live="polite" if implemented with JavaScript.