Neumorphic Pricing Cards Component

A modern pricing table with neumorphic design, soft shadows, and interactive elements for a tactile user experience.

Features

• Neumorphic Design: Soft UI design with subtle shadows that create an extruded effect
• Billing Toggle: Switch between monthly and yearly pricing with discount display
• Popular Plan Highlight: Visually distinct card for the most popular plan
• Feature Comparison: Clear feature lists with visual indicators
• Responsive Layout: Adapts to all screen sizes with mobile-friendly design
• Interactive Elements: Hover effects and smooth transitions for enhanced UX

HTML Structure

<div class="neumorphic-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">Choose Your Plan</h2>
    <p class="pricing-subtitle">Select the perfect plan for your needs</p>
  </div>
  
  <div class="pricing-toggle">
    <span class="toggle-label">Monthly</span>
    <label class="switch">
      <input type="checkbox" id="billing-toggle">
      <span class="slider"></span>
    </label>
    <span class="toggle-label">Yearly</span>
    <span class="discount-badge">Save 20%</span>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card">
      <div class="card-header">
        <h3 class="plan-name">Starter</h3>
        <p class="plan-description">Perfect for individuals</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="9" data-yearly="7.20">9</span>
        <span class="period">/month</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">5 Projects</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">10GB Storage</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Basic Support</span>
        </li>
        <li class="feature-item disabled">
          <span class="feature-icon">✗</span>
          <span class="feature-text">Advanced Analytics</span>
        </li>
        <li class="feature-item disabled">
          <span class="feature-icon">✗</span>
          <span class="feature-text">Custom Domain</span>
        </li>
      </ul>
      <button class="select-button">Get Started</button>
    </div>
    
    <div class="pricing-card popular">
      <div class="popular-badge">Most Popular</div>
      <div class="card-header">
        <h3 class="plan-name">Professional</h3>
        <p class="plan-description">Ideal for small teams</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="29" data-yearly="23.20">29</span>
        <span class="period">/month</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Unlimited Projects</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">100GB Storage</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Priority Support</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Advanced Analytics</span>
        </li>
        <li class="feature-item disabled">
          <span class="feature-icon">✗</span>
          <span class="feature-text">Custom Domain</span>
        </li>
      </ul>
      <button class="select-button">Get Started</button>
    </div>
    
    <div class="pricing-card">
      <div class="card-header">
        <h3 class="plan-name">Enterprise</h3>
        <p class="plan-description">For large organizations</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="99" data-yearly="79.20">99</span>
        <span class="period">/month</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Unlimited Projects</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">1TB Storage</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">24/7 Premium Support</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Advanced Analytics</span>
        </li>
        <li class="feature-item">
          <span class="feature-icon">✓</span>
          <span class="feature-text">Custom Domain</span>
        </li>
      </ul>
      <button class="select-button">Get Started</button>
    </div>
  </div>
</div>

CSS Styles

.neumorphic-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #e0e5ec;
  min-height: 100vh;
}

.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
}

.pricing-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.pricing-subtitle {
  color: #6b7280;
  font-size: 1.1rem;
}

.pricing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.toggle-label {
  font-size: 1rem;
  color: #4b5563;
  font-weight: 500;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e0e5ec;
  box-shadow: inset 2px 2px 4px #b8bec6, inset -2px -2px 4px #ffffff;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background: #d1d8e0;
  box-shadow: 2px 2px 4px #b8bec6, -2px -2px 4px #ffffff;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background: #d1d8e0;
  box-shadow: inset 2px 2px 4px #b8bec6, inset -2px -2px 4px #ffffff;
}

input:checked + .slider:before {
  transform: translateX(30px);
  background: #667eea;
  box-shadow: 2px 2px 4px #b8bec6, -2px -2px 4px #ffffff;
}

.discount-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.pricing-card {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 8px 8px 16px #b8bec6, -8px -8px 16px #ffffff;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pricing-card:hover {
  box-shadow: 6px 6px 12px #b8bec6, -6px -6px 12px #ffffff;
  transform: translateY(-5px);
}

.popular {
  box-shadow: 12px 12px 24px #b8bec6, -12px -12px 24px #ffffff;
  transform: scale(1.05);
}

.popular:hover {
  box-shadow: 10px 10px 20px #b8bec6, -10px -10px 20px #ffffff;
}

.popular-badge {
  position: absolute;
  top: 1rem;
  right: -30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.plan-name {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 700;
}

.plan-description {
  color: #6b7280;
  font-size: 0.9rem;
}

.card-price {
  text-align: center;
  margin-bottom: 2rem;
}

.currency {
  font-size: 1.5rem;
  color: #6b7280;
  vertical-align: top;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #333;
}

.period {
  color: #6b7280;
  font-size: 1rem;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(184, 190, 198, 0.3);
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 0.8rem;
  font-weight: bold;
}

.feature-item:not(.disabled) .feature-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.feature-item.disabled .feature-icon {
  background: #d1d8e0;
  color: #9ca3af;
}

.feature-text {
  color: #333;
  font-size: 0.95rem;
}

.feature-item.disabled .feature-text {
  color: #9ca3af;
}

.select-button {
  width: 100%;
  padding: 1rem;
  background: #e0e5ec;
  box-shadow: inset 2px 2px 4px #b8bec6, inset -2px -2px 4px #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.select-button:hover {
  background: #d1d8e0;
  box-shadow: inset 2px 2px 4px #b8bec6, inset -2px -2px 4px #ffffff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .neumorphic-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .popular {
    transform: scale(1);
  }
  
  .popular:hover {
    transform: translateY(-5px);
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('billing-toggle');
  const amounts = document.querySelectorAll('.amount');
  
  toggle.addEventListener('change', function() {
    amounts.forEach(amount => {
      if (this.checked) {
        amount.textContent = amount.getAttribute('data-yearly');
      } else {
        amount.textContent = amount.getAttribute('data-monthly');
      }
    });
  });
});

Implementation Guide

1. Copy the HTML structure into your project
2. Add the CSS styles to your stylesheet
3. Include the JavaScript code in your script file
4. Customize the colors, shadows, and text to match your brand
5. Update the pricing plans and features to reflect your offerings

The neumorphic pricing cards feature a soft UI design with subtle shadows that create an extruded effect, giving the interface a tactile, three-dimensional appearance. The design is fully responsive and includes interactive elements like a billing toggle and hover effects.