Neon Glow Pricing Cards Component

A vibrant pricing table with neon glow effects, pulsing animations, and cyberpunk aesthetics for an electrifying user experience.

Features

• Neon Glow Effects: Intense neon lighting using layered text and box shadows
• Pulsing Animations: Continuous glowing animations for dynamic visual appeal
• Cyberpunk Aesthetics: Futuristic design with vibrant colors and digital elements
• Corner Accents: Neon corner highlights for distinctive card styling
• Hover Effects: Enhanced glow effects on hover for interactive feedback
• Responsive Layout: Adapts to all screen sizes with mobile-friendly design

HTML Structure

<div class="neon-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">/// NEON PRICING ///</h2>
    <p class="pricing-subtitle">GLOWING PLANS FOR YOUR SUCCESS</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" data-tier="starter">
      <div class="card-header">
        <div class="neon-corner tl"></div>
        <div class="neon-corner tr"></div>
        <div class="neon-corner bl"></div>
        <div class="neon-corner br"></div>
        <h3 class="plan-name">STARTER</h3>
        <p class="plan-description">FOR BEGINNERS</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">
          <div class="feature-icon">✓</div>
          <span class="feature-text">3 Projects</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">10GB 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">API Access</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 class="pricing-card popular" data-tier="professional">
      <div class="card-header">
        <div class="neon-corner tl"></div>
        <div class="neon-corner tr"></div>
        <div class="neon-corner bl"></div>
        <div class="neon-corner br"></div>
        <div class="popular-badge">MOST POPULAR</div>
        <h3 class="plan-name">PROFESSIONAL</h3>
        <p class="plan-description">FOR GROWING BUSINESSES</p>
      </div>
      <div class="card-price">
        <span class="currency">$</span>
        <span class="amount" data-monthly="59" data-yearly="47.20">59</span>
        <span class="period">/MONTH</span>
      </div>
      <ul class="features-list">
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">10 Projects</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">100GB 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">API Access</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 class="pricing-card" data-tier="enterprise">
      <div class="card-header">
        <div class="neon-corner tl"></div>
        <div class="neon-corner tr"></div>
        <div class="neon-corner bl"></div>
        <div class="neon-corner br"></div>
        <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">
          <div class="feature-icon">✓</div>
          <span class="feature-text">Unlimited Projects</span>
        </li>
        <li class="feature-item">
          <div class="feature-icon">✓</div>
          <span class="feature-text">1TB 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">Full API Access</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>

CSS Styles

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

.neon-pricing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 0, 0.1) 0%, transparent 30%);
  pointer-events: none;
  animation: float 20s ease-in-out infinite;
}

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

.pricing-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #fff;
  text-shadow: 
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 30px #ff00ff;
  letter-spacing: 3px;
  animation: title-pulse 2s ease-in-out infinite alternate;
}

.pricing-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.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);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
  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: rgba(20, 20, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background: #fff;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff;
}

input:checked + .slider {
  background: rgba(20, 20, 40, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

input:checked + .slider:before {
  transform: translateX(30px);
  box-shadow: 0 0 15px #fff;
}

.discount-badge {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  text-shadow: none;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

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

.pricing-card {
  background: rgba(15, 15, 35, 0.7);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
  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(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%);
  pointer-events: none;
  z-index: -1;
}

.pricing-card:hover {
  background: rgba(20, 20, 45, 0.9);
  border-color: rgba(150, 150, 255, 0.6);
  box-shadow: 
    0 0 20px rgba(255, 0, 255, 0.4),
    0 0 30px rgba(0, 255, 255, 0.3);
  transform: translateY(-10px);
}

.popular {
  background: rgba(25, 25, 55, 0.8);
  border-color: rgba(180, 180, 255, 0.5);
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.3);
}

.popular:hover {
  box-shadow: 
    0 0 30px rgba(255, 0, 255, 0.5),
    0 0 40px rgba(0, 255, 255, 0.4);
}

.neon-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ff00ff;
  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}

.tl {
  top: -2px;
  left: -2px;
  border-radius: 0 0 50% 0;
}

.tr {
  top: -2px;
  right: -2px;
  border-radius: 0 0 0 50%;
}

.bl {
  bottom: -2px;
  left: -2px;
  border-radius: 0 50% 0 0;
}

.br {
  bottom: -2px;
  right: -2px;
  border-radius: 50% 0 0 0;
}

.card-header {
  padding: 2rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(100, 100, 200, 0.2);
}

.popular-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  color: #000;
  padding: 0.25rem 1rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  z-index: 3;
  animation: badge-pulse 2s ease-in-out infinite;
}

.plan-name {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.plan-description {
  color: rgba(200, 200, 255, 0.8);
  font-size: 0.9rem;
  text-shadow: 0 0 3px rgba(200, 200, 255, 0.3);
}

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

.currency {
  font-size: 1.5rem;
  color: #00ffff;
  vertical-align: top;
  text-shadow: 0 0 5px #00ffff;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 
    0 0 10px #00ffff,
    0 0 20px #00ffff;
  animation: price-glow 3s ease-in-out infinite alternate;
}

.period {
  color: rgba(200, 200, 255, 0.8);
  font-size: 1rem;
  text-shadow: 0 0 3px rgba(200, 200, 255, 0.3);
}

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

.feature-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(100, 100, 200, 0.1);
}

.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: #00ff00;
  color: #000;
  box-shadow: 0 0 10px #00ff00;
}

.feature-item.disabled .feature-icon {
  background: #ff0000;
  color: #000;
  box-shadow: 0 0 10px #ff0000;
}

.feature-text {
  color: rgba(200, 200, 255, 0.9);
  font-size: 0.95rem;
  text-shadow: 0 0 2px rgba(200, 200, 255, 0.3);
  flex: 1;
}

.feature-item.disabled .feature-text {
  color: rgba(150, 150, 150, 0.7);
  text-shadow: none;
}

.select-button {
  width: calc(100% - 4rem);
  margin: 0 2rem 2rem;
  padding: 1rem;
  background: rgba(30, 30, 60, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #00ffff;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 3px #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.select-button:hover {
  background: rgba(40, 40, 80, 0.7);
  border-color: rgba(150, 150, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  transform: translateY(-2px);
}

@keyframes title-pulse {
  0% {
    text-shadow: 
      0 0 10px #ff00ff,
      0 0 20px #ff00ff,
      0 0 30px #ff00ff;
  }
  100% {
    text-shadow: 
      0 0 15px #ff00ff,
      0 0 25px #ff00ff,
      0 0 35px #ff00ff,
      0 0 45px #ff00ff;
  }
}

@keyframes badge-pulse {
  0% {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.7);
  }
}

@keyframes price-glow {
  0% {
    text-shadow: 
      0 0 10px #00ffff,
      0 0 20px #00ffff;
  }
  100% {
    text-shadow: 
      0 0 15px #00ffff,
      0 0 25px #00ffff,
      0 0 35px #00ffff;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@media (max-width: 768px) {
  .neon-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .plan-name {
    font-size: 1.5rem;
  }
}

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 neon colors and glow effects to match your brand
5. Update the pricing plans and features to reflect your offerings

The neon glow pricing cards feature intense neon lighting effects using layered text and box shadows. The design includes continuous pulsing animations, vibrant colors, and distinctive corner accents that create an electrifying cyberpunk aesthetic with modern visual appeal.