Pricing card

Quick implementation

.pricing-grid {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.pricing-card {
  background: oklch(0.2 0.015 260);
  border: 1px solid oklch(0.28 0.02 260);
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 14rem;
  text-align: center;
  color: oklch(0.88 0.01 260);
}

.pricing-card--popular {
  transform: scale(1.08);
  border-color: oklch(0.6 0.22 270);
  box-shadow:
    0 0 0 1px oklch(0.6 0.22 270 / 0.3),
    0 8px 24px oklch(0 0 0 / 0.4);
}

.pricing-card .price {
  font-size: 2rem;
  font-weight: 800;
}

.pricing-card .cta {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid oklch(0.4 0.02 260);
  border-radius: 0.4rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease;
}

.pricing-card--popular .cta {
  background: oklch(0.55 0.22 270);
  border-color: oklch(0.55 0.22 270);
  color: oklch(0.98 0 0);
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any code-generating model to scaffold the pattern instantly.

Create a pricing card component with HTML and CSS. Display
three tiers (Starter, Pro, Team) side by side using flexbox
with flex-wrap. Each card has a plan name, price with /mo
suffix, a feature list, and a CTA button. The middle card
gets a --popular modifier class that applies
transform: scale(1.08), a purple border at
oklch(0.6 0.22 270), a layered box-shadow, and a solid
purple CTA button instead of an outlined one. Use oklch()
for all colors. Add a small "Popular" badge above the
popular card's title.

Why this matters

Pricing pages are a critical conversion point for SaaS products. Drawing attention to the recommended tier with visual elevation and color accents directly impacts sign-up rates. The transform: scale() technique is more elegant than simply making the popular card taller, because it maintains the same content layout while creating a visual hierarchy that feels natural.

The logic

The three cards sit in a flex container with align-items: center, so the scaled popular card naturally rises above its neighbors. The popular card uses transform: scale(1.08) to enlarge it slightly. A layered box-shadow creates depth: the first layer is a subtle ring using a spread-only shadow, and the second is a large diffused shadow below. The CTA button switches from an outlined style to a filled style using the accent color, creating a stronger call to action.

Accessibility & performance

Ensure each pricing card is inside a section or article with a heading for screen-reader navigation. The feature lists should use proper <ul> elements. CTA links should have descriptive text like "Get started with Pro" using aria-label if the visible text is generic. The transform: scale() does not trigger layout reflow since it operates on the compositor layer, keeping the initial render fast. Color contrast between the purple accent and white text meets WCAG AA at these oklch values.