Modern Minimal Pricing Table

A futuristic, glassmorphic pricing table with a sleek sliding toggle animation. Features a deep dark mode aesthetic, ambient glow effects, and minimal typography.

Redefine your product’s pricing page with this ultra-modern, minimal design. Moving away from standard cards, this snippet uses glassmorphism (frosted glass), ambient light orbs, and a custom-built “segmented control” toggle for a premium feel.

Design Highlights

• Glassmorphism Cards: Semi-transparent backgrounds with background blur filters (backdrop-filter) for depth.
• Ambient Glow: Subtle, floating color orbs in the background create a rich, immersive atmosphere.
• Sliding Toggle: A custom JavaScript-driven toggle that physically slides a highlight pill between options.
• Minimal Typography: Uses the Inter font family for clean, legible, and professional text.
• Focus State: The “Pro” plan is subtly highlighted with a larger scale and a unique glow gradient.

Code Snippet

CSS Variables & Theme

We use CSS variables to manage the glass effect and colors easily.

:root {
  --bg-color: #030712;
  --text-main: #f9fafb;
  --primary: #8b5cf6;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
}

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  /* smooth lift on hover */
  transition: transform 0.4s ease;
}

JavaScript Toggle Logic

The toggle uses a sliding background element (.toggle-bg) that moves to the position of the active button.

function updateToggle(selectedBtn) {
  // Get positions
  const rect = selectedBtn.getBoundingClientRect();
  const wrapperRect = wrapper.getBoundingClientRect();
  
  // Calculate relative left position
  const left = rect.left - wrapperRect.left;
  const width = rect.width;

  // Animate the background pill
  bg.style.transform = `translateX(${left}px)`;
  bg.style.width = `${width}px`;

  // Update numbers...
}

This snippet comes with full responsiveness out of the box, ensuring your pricing looks great on mobile and desktop.