Glassmorphism Pricing Table Component

A modern pricing table with glassmorphism design, backdrop blur effects, and vibrant accents for a premium user experience.

Features

• Glassmorphism Design: Frosted glass effect using backdrop blur and transparency
• Vibrant Accents: Colorful elements that stand out against the blurred background
• Billing Toggle: Switch between monthly and yearly pricing with discount display
• Plan Highlighting: Visually distinct cards for popular and enterprise plans
• SVG Icons: Clean and scalable icons for feature indicators
• Responsive Layout: Adapts to all screen sizes with mobile-friendly design

HTML Structure

<div class="glassmorphism-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">Transparent Pricing</h2>
    <p class="pricing-subtitle">Crystal clear plans with no hidden fees</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 25%</span>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card">
      <div class="card-header">
        <h3 class="plan-name">Essential</h3>
        <p class="plan-description">For beginners and solo creators</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="12" data-yearly="9.60">12</span>
        <span class="period">/month</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">3 Projects</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">20GB Storage</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Email Support</span>
        </li>
        <li class="feature-item disabled">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
          <span class="feature-text">Custom Branding</span>
        </li>
        <li class="feature-item disabled">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
          <span class="feature-text">API Access</span>
        </li>
      </ul>
      <button class="select-button">Start Free Trial</button>
    </div>
    
    <div class="pricing-card popular">
      <div class="popular-badge">Best Value</div>
      <div class="card-header">
        <h3 class="plan-name">Growth</h3>
        <p class="plan-description">Perfect for growing teams</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="39" data-yearly="31.20">39</span>
        <span class="period">/month</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Unlimited Projects</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">200GB Storage</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Priority Chat Support</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Custom Branding</span>
        </li>
        <li class="feature-item disabled">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
          <span class="feature-text">API Access</span>
        </li>
      </ul>
      <button class="select-button">Start Free Trial</button>
    </div>
    
    <div class="pricing-card enterprise">
      <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="129" data-yearly="103.20">129</span>
        <span class="period">/month</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Unlimited Projects</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">2TB Storage</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">24/7 Phone Support</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Custom Branding</span>
        </li>
        <li class="feature-item">
          <svg class="feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 6L9 17l-5-5"></path>
          </svg>
          <span class="feature-text">Full API Access</span>
        </li>
      </ul>
      <button class="select-button">Contact Sales</button>
    </div>
  </div>
</div>

CSS Styles

.glassmorphism-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.glassmorphism-pricing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="80" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="%23ffffff" opacity="0.2"/></svg>');
  pointer-events: none;
}

.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.pricing-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pricing-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
}

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

.toggle-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.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: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: .4s;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
  background: rgba(255, 255, 255, 0.3);
}

input:checked + .slider:before {
  transform: translateX(30px);
}

.discount-badge {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.pricing-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.pricing-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.popular {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.popular:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05) translateY(-10px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.enterprise {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.enterprise:hover {
  background: rgba(255, 255, 255, 0.15);
}

.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 4px 12px 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: white;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.plan-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

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

.currency {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  vertical-align: top;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.period {
  color: rgba(255, 255, 255, 0.8);
  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(255, 255, 255, 0.1);
}

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

.feature-icon {
  width: 20px;
  height: 20px;
  margin-right: 1rem;
  flex-shrink: 0;
}

.feature-item:not(.disabled) .feature-icon {
  color: #4ade80;
}

.feature-item.disabled .feature-icon {
  color: #94a3b8;
}

.feature-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}

.feature-item.disabled .feature-text {
  color: rgba(255, 255, 255, 0.6);
}

.select-button {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.select-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .glassmorphism-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(-10px);
  }
}

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 gradient colors, blur intensity, and text to match your brand
5. Update the pricing plans and features to reflect your offerings

The glassmorphism pricing table features a frosted glass effect using backdrop blur and transparency, creating a premium and modern appearance. The design includes vibrant accents that stand out against the blurred background, with a responsive layout that works on all devices.