3D Floating Pricing Cards Component

An innovative pricing table with floating 3D cards, dynamic shadows, and interactive animations for a cutting-edge user experience.

Features

• 3D Floating Effect: Cards that float and rotate in 3D space with mouse movement
• Dynamic Shadows: Realistic shadows that change with card rotation
• Interactive Animations: Smooth transitions and hover effects
• Billing Toggle: Switch between monthly and yearly pricing with discount display
• Popular Plan Highlight: Visually distinct card for the most popular plan
• Gradient Accents: Modern gradient colors for visual appeal

HTML Structure

<div class="floating-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">Elevated Pricing</h2>
    <p class="pricing-subtitle">Plans that float above the competition</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 30%</span>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card" data-tier="basic">
      <div class="card-inner">
        <div class="card-header">
          <h3 class="plan-name">Basic</h3>
          <p class="plan-description">Perfect for starters</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="19" data-yearly="13.30">19</span>
          <span class="period">/month</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">1 Website</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">5GB Storage</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Basic Support</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-icon">✗</div>
            <span class="feature-text">SSL Certificate</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-icon">✗</div>
            <span class="feature-text">Custom Domain</span>
          </li>
        </ul>
        <button class="select-button">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card popular" data-tier="pro">
      <div class="card-inner">
        <div class="popular-badge">Most Popular</div>
        <div class="card-header">
          <h3 class="plan-name">Pro</h3>
          <p class="plan-description">For growing businesses</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="49" data-yearly="34.30">49</span>
          <span class="period">/month</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">5 Websites</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">50GB Storage</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Priority Support</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Free SSL Certificate</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-icon">✗</div>
            <span class="feature-text">Custom Domain</span>
          </li>
        </ul>
        <button class="select-button">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card" data-tier="enterprise">
      <div class="card-inner">
        <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="69.30">99</span>
          <span class="period">/month</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Unlimited Websites</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">500GB Storage</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">24/7 Dedicated Support</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Free SSL Certificate</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Custom Domain</span>
          </li>
        </ul>
        <button class="select-button">Contact Sales</button>
      </div>
    </div>
  </div>
</div>

CSS Styles

.floating-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0f172a;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.floating-pricing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%),
              radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
  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: #f1f5f9;
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.pricing-subtitle {
  color: #94a3b8;
  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: #cbd5e1;
  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: #1e293b;
  transition: .4s;
  border-radius: 34px;
  border: 1px solid #334155;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

input:checked + .slider {
  background: #1e293b;
}

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

.discount-badge {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 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 0 15px rgba(236, 72, 153, 0.4);
}

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

.pricing-card {
  background: #1e293b;
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateZ(0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-radius: 20px;
  z-index: -1;
}

.pricing-card:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.pricing-card.popular {
  background: #334155;
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.pricing-card.popular:hover {
  transform: scale(1.05) translateY(-15px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.pricing-card.popular .popular-badge {
  position: absolute;
  top: 1rem;
  right: -30px;
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: white;
  padding: 0.25rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  transform: rotate(45deg);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
}

.card-inner {
  position: relative;
  z-index: 2;
}

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

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

.plan-description {
  color: #94a3b8;
  font-size: 0.9rem;
}

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

.card-price::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
}

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

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #f1f5f9;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.period {
  color: #94a3b8;
  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 #334155;
}

.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;
  flex-shrink: 0;
}

.feature-item:not(.disabled) .feature-icon {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.feature-item.disabled .feature-icon {
  background: #334155;
  color: #64748b;
}

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

.feature-item.disabled .feature-text {
  color: #64748b;
}

.select-button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

.select-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
}

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

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');
      }
    });
  });
  
  // Add 3D effect to cards
  const cards = document.querySelectorAll('.pricing-card');
  
  cards.forEach(card => {
    card.addEventListener('mousemove', (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      const rotateX = (y - centerY) / 20;
      const rotateY = (centerX - x) / 20;
      
      if (!card.classList.contains('popular')) {
        card.style.transform = `translateZ(0) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      }
    });
    
    card.addEventListener('mouseleave', () => {
      if (!card.classList.contains('popular')) {
        card.style.transform = 'translateZ(0)';
      }
    });
  });
});

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 and 3D effect intensity to match your brand
5. Update the pricing plans and features to reflect your offerings

The 3D floating pricing cards feature a cutting-edge design with cards that rotate in 3D space in response to mouse movement. The popular plan is visually distinct and slightly elevated, with all cards featuring dynamic shadows that change with rotation for a realistic floating effect.