Pricing Card

rohit
Feb 13, 2026 4
Live Preview

Live Editor

<div class="bg-orbs">
  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>
  <div class="orb orb-3"></div>
</div>

<div class="page">

  <!-- Header -->
  <div class="header">
    <div class="badge"><div class="badge-dot"></div> Transparent Pricing</div>
    <h1 class="title">Choose Your <span>Plan</span></h1>
    <p class="subtitle">Start free. Scale when you're ready. No hidden fees, no surprises.</p>

    <!-- Billing toggle -->
    <div class="toggle-row">
      <span class="toggle-label active" id="lbl-monthly">Monthly</span>
      <div class="toggle" id="toggle" onclick="switchBilling()">
        <div class="toggle-knob"></div>
      </div>
      <span class="toggle-label" id="lbl-yearly">Yearly</span>
      <div class="save-chip" id="saveChip">Save 30%</div>
    </div>
  </div>

  <!-- Cards -->
  <div class="cards">

    <!-- FREE -->
    <div class="card card-free">
      <div class="plan-icon icon-free">🌱</div>
      <div class="plan-name name-free">Free</div>
      <p class="plan-desc">Perfect for side projects and personal use.</p>
      <div class="price-row">
        <span class="currency">$</span>
        <span class="amount" id="amt-free">0</span>
      </div>
      <div class="period">/ month, forever</div>
      <div class="price-note">No credit card required</div>
      <div class="divider"></div>
      <ul class="features">
        <li class="feat"><div class="feat-icon check-violet">✓</div> 3 Projects</li>
        <li class="feat"><div class="feat-icon check-violet">✓</div> 5 GB Storage</li>
        <li class="feat"><div class="feat-icon check-violet">✓</div> Community support</li>
        <li class="feat"><div class="feat-icon check-violet">✓</div> Basic analytics</li>
        <li class="feat disabled"><div class="feat-icon cross">✕</div> Custom domains</li>
        <li class="feat disabled"><div class="feat-icon cross">✕</div> Team collaboration</li>
        <li class="feat disabled"><div class="feat-icon cross">✕</div> Priority support</li>
      </ul>
      <button class="btn btn-free">Get Started Free</button>
    </div>

    <!-- PRO (featured) -->
    <div class="card card-pro">
      <div class="popular-badge">⚡ Most Popular</div>
      <div class="plan-icon icon-pro">🚀</div>
      <div class="plan-name name-pro">Pro</div>
      <p class="plan-desc">For professionals who need more power and flexibility.</p>
      <div class="price-row">
        <span class="currency">$</span>
        <span class="amount" id="amt-pro">29</span>
      </div>
      <div class="period" id="period-pro">/ month, billed monthly</div>
      <div class="price-note" id="note-pro"></div>
      <div class="divider"></div>
      <ul class="features">
        <li class="feat"><div class="feat-icon check-cyan">✓</div> Unlimited Projects</li>
        <li class="feat"><div class="feat-icon check-cyan">✓</div> 100 GB Storage</li>
        <li class="feat"><div class="feat-icon check-cyan">✓</div> Priority email support</li>
        <li class="feat"><div class="feat-icon check-cyan">✓</div> Advanced analytics</li>
        <li class="feat"><div class="feat-icon check-cyan">✓</div> 5 Custom domains</li>
        <li class="feat"><div class="feat-icon check-cyan">✓</div> Team up to 5 members</li>
        <li class="feat disabled"><div class="feat-icon cross">✕</div> SSO / SAML</li>
      </ul>
      <button class="btn btn-pro">Start 14-day Free Trial</button>
    </div>

    <!-- ENTERPRISE -->
    <div class="card card-enterprise">
      <div class="plan-icon icon-enterprise">🏢</div>
      <div class="plan-name name-enterprise">Enterprise</div>
      <p class="plan-desc">For teams that demand security, compliance, and scale.</p>
      <div class="price-row">
        <span class="currency" style="visibility:hidden">$</span>
        <span class="amount" style="font-size:42px; margin-bottom:4px;" id="amt-ent">Custom</span>
      </div>
      <div class="period" id="period-ent">Tailored to your team</div>
      <div class="price-note highlight" id="note-ent">Volume discounts available</div>
      <div class="divider"></div>
      <ul class="features">
        <li class="feat"><div class="feat-icon check-amber">✓</div> Everything in Pro</li>
        <li class="feat"><div class="feat-icon check-amber">✓</div> Unlimited Storage</li>
        <li class="feat"><div class="feat-icon check-amber">✓</div> 24/7 Dedicated support</li>
        <li class="feat"><div class="feat-icon check-amber">✓</div> Custom analytics & reports</li>
        <li class="feat"><div class="feat-icon check-amber">✓</div> Unlimited custom domains</li>
        <li class="feat"><div class="feat-icon check-amber">✓</div> Unlimited team members</li>
        <li class="feat"><div class="feat-icon check-amber">✓</div> SSO / SAML / SCIM</li>
      </ul>
      <button class="btn btn-enterprise">Contact Sales →</button>
    </div>

  </div>

  <!-- Footer note -->
  <div class="footer-note">
    <span>🔒 SSL Encrypted</span>
    <span>↩ 30-day Money Back</span>
    <span>🚫 Cancel Anytime</span>
    <span>💳 No Setup Fees</span>
  </div>

</div>
:root {
    --bg:       #060410;
    --card-1:   #0c0820;
    --card-2:   #07111e;
    --card-3:   #0a0f1a;
    --violet:   #7c3aed;
    --violet-l: #a78bfa;
    --cyan:     #06b6d4;
    --cyan-l:   #67e8f9;
    --amber:    #f59e0b;
    --amber-l:  #fcd34d;
    --text:     #f1f0ff;
    --muted:    #6b6890;
    --border:   rgba(255,255,255,0.07);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    overflow-x: hidden;
  }

  /* ── Background atmosphere ── */
  .bg-orbs {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
  }
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
  }
  .orb-1 { width: 500px; height: 500px; background: var(--violet); top: -100px; left: -150px; }
  .orb-2 { width: 400px; height: 400px; background: var(--cyan);   bottom: -80px; right: -100px; }
  .orb-3 { width: 300px; height: 300px; background: var(--amber);  top: 40%; left: 50%; transform: translate(-50%,-50%); opacity: 0.06; }

  /* Noise texture */
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 200;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; opacity: 0.4;
  }

  /* ── Page wrapper ── */
  .page { position: relative; z-index: 1; width: 100%; max-width: 1100px; }

  /* ── Header ── */
  .header { text-align: center; margin-bottom: 64px; }

  .badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 16px; border-radius: 100px;
    border: 1px solid rgba(124,58,237,0.4);
    background: rgba(124,58,237,0.08);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--violet-l); margin-bottom: 24px;
  }
  .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-l); box-shadow: 0 0 8px var(--violet-l); animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:0.4} }

  .title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    color: var(--text);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  .title span {
    background: linear-gradient(90deg, var(--violet-l), var(--cyan-l));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }

  .subtitle {
    font-size: 16px; color: var(--muted); max-width: 480px; margin: 0 auto;
    line-height: 1.7; font-weight: 300;
  }

  /* Toggle */
  .toggle-row {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 32px;
  }
  .toggle-label { font-size: 13px; color: var(--muted); font-weight: 400; }
  .toggle-label.active { color: var(--text); }

  .toggle {
    width: 48px; height: 26px; border-radius: 100px;
    background: rgba(124,58,237,0.3);
    border: 1px solid rgba(124,58,237,0.5);
    position: relative; cursor: pointer; transition: background 0.3s;
  }
  .toggle.on { background: rgba(124,58,237,0.7); }
  .toggle-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1);
  }
  .toggle.on .toggle-knob { transform: translateX(22px); }

  .save-chip {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    padding: 3px 10px; border-radius: 100px;
    background: linear-gradient(90deg, rgba(245,158,11,0.2), rgba(252,211,77,0.1));
    border: 1px solid rgba(245,158,11,0.35);
    color: var(--amber-l);
    opacity: 0; transform: translateX(-6px);
    transition: all 0.3s;
  }
  .save-chip.visible { opacity: 1; transform: translateX(0); }

  /* ── Cards grid ── */
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
  }

  @media (max-width: 768px) {
    .cards { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  }

  /* ── Card base ── */
  .card {
    border-radius: 24px;
    padding: 36px 32px 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.4s;
    cursor: pointer;
  }
  .card:hover { transform: translateY(-8px); }

  /* Card inners */
  .card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 24px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }

  /* ── FREE card ── */
  .card-free {
    background: linear-gradient(160deg, #0f0c22 0%, #0a0818 100%);
    border: 1px solid rgba(255,255,255,0.07);
  }
  .card-free:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px rgba(124,58,237,0.08);
    border-color: rgba(124,58,237,0.25);
  }

  /* ── PRO card (featured) ── */
  .card-pro {
    background: linear-gradient(160deg, #0d1e35 0%, #071525 100%);
    border: 1px solid rgba(6,182,212,0.25);
    transform: scale(1.04);
    box-shadow: 0 0 0 1px rgba(6,182,212,0.15), 0 30px 80px rgba(6,182,212,0.12), 0 60px 120px rgba(0,0,0,0.5);
  }
  .card-pro:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: 0 0 0 1px rgba(6,182,212,0.35), 0 40px 100px rgba(6,182,212,0.2), 0 60px 120px rgba(0,0,0,0.6);
  }

  /* Glow beam top of Pro card */
  .card-pro::after {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 20px 2px rgba(6,182,212,0.5);
  }

  /* ── ENTERPRISE card ── */
  .card-enterprise {
    background: linear-gradient(160deg, #120e1a 0%, #0c0912 100%);
    border: 1px solid rgba(245,158,11,0.15);
  }
  .card-enterprise:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.3);
  }

  /* ── Popular badge ── */
  .popular-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    font-family: 'Syne', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    padding: 5px 18px;
    background: linear-gradient(90deg, var(--cyan), #818cf8);
    color: #fff;
    border-radius: 0 0 12px 12px;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(6,182,212,0.4);
  }

  /* ── Card content ── */
  .plan-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 20px;
  }
  .icon-free       { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.2); }
  .icon-pro        { background: rgba(6,182,212,0.12);  border: 1px solid rgba(6,182,212,0.25); }
  .icon-enterprise { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.2); }

  .plan-name {
    font-family: 'Syne', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    margin-bottom: 6px;
  }
  .name-free       { color: var(--violet-l); }
  .name-pro        { color: var(--cyan-l); }
  .name-enterprise { color: var(--amber-l); }

  .plan-desc {
    font-size: 13px; color: var(--muted);
    line-height: 1.6; margin-bottom: 28px;
    font-weight: 300;
  }

  /* Price */
  .price-row {
    display: flex; align-items: flex-end; gap: 4px;
    margin-bottom: 6px;
  }
  .currency {
    font-family: 'Syne', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
  }
  .amount {
    font-family: 'Syne', sans-serif;
    font-size: 56px; font-weight: 800;
    color: var(--text); line-height: 1;
    transition: all 0.3s;
  }
  .period {
    font-size: 13px; color: var(--muted);
    margin-bottom: 10px; font-weight: 400;
  }

  .price-note {
    font-size: 12px; color: var(--muted);
    margin-bottom: 28px; min-height: 18px;
  }
  .price-note.highlight { color: var(--amber-l); }

  /* Divider */
  .divider {
    height: 1px; background: var(--border);
    margin-bottom: 24px;
  }

  /* Features list */
  .features { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 36px; }
  .feat {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14px; color: rgba(241,240,255,0.75);
    line-height: 1.5;
  }
  .feat-icon {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0; margin-top: 1px;
  }
  .check-violet { background: rgba(124,58,237,0.2); color: var(--violet-l); border: 1px solid rgba(124,58,237,0.3); }
  .check-cyan   { background: rgba(6,182,212,0.15); color: var(--cyan-l);   border: 1px solid rgba(6,182,212,0.3); }
  .check-amber  { background: rgba(245,158,11,0.12);color: var(--amber-l);  border: 1px solid rgba(245,158,11,0.25); }
  .cross        { background: rgba(255,255,255,0.04); color: #3d3a5c; border: 1px solid rgba(255,255,255,0.06); }
  .feat.disabled { opacity: 0.35; }

  /* CTA buttons */
  .btn {
    width: 100%; padding: 14px;
    border-radius: 12px;
    font-family: 'Syne', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer; border: none;
    transition: all 0.3s;
    position: relative; overflow: hidden;
  }
  .btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0; transition: opacity 0.3s;
  }
  .btn:hover::after { opacity: 1; }
  .btn:active { transform: scale(0.98); }

  .btn-free {
    background: rgba(124,58,237,0.12);
    border: 1px solid rgba(124,58,237,0.35);
    color: var(--violet-l);
  }
  .btn-free:hover {
    background: rgba(124,58,237,0.22);
    border-color: rgba(124,58,237,0.6);
    box-shadow: 0 0 20px rgba(124,58,237,0.2);
  }

  .btn-pro {
    background: linear-gradient(135deg, var(--cyan), #6366f1);
    color: #fff;
    box-shadow: 0 4px 24px rgba(6,182,212,0.35), 0 8px 40px rgba(6,182,212,0.15);
  }
  .btn-pro:hover {
    box-shadow: 0 6px 32px rgba(6,182,212,0.5), 0 12px 50px rgba(6,182,212,0.2);
    transform: translateY(-1px);
  }

  .btn-enterprise {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.35);
    color: var(--amber-l);
  }
  .btn-enterprise:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.6);
    box-shadow: 0 0 20px rgba(245,158,11,0.15);
  }

  /* ── Footer note ── */
  .footer-note {
    text-align: center;
    margin-top: 40px;
    font-size: 13px;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center; gap: 24px;
    flex-wrap: wrap;
  }
  .footer-note span { display: flex; align-items: center; gap: 6px; }

  /* Shimmer on Pro amount */
  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  .card-pro .amount {
    background: linear-gradient(90deg, var(--text) 30%, var(--cyan-l) 50%, var(--text) 70%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmer 4s linear infinite;
  }
 let isYearly = false;

  const prices = {
    monthly: { pro: 29,  label: '/ month, billed monthly',  note: '' },
    yearly:  { pro: 20,  label: '/ month, billed $240/yr',  note: '🎉 You save $108/year' }
  };

  function switchBilling() {
    isYearly = !isYearly;
    const toggle    = document.getElementById('toggle');
    const lblM      = document.getElementById('lbl-monthly');
    const lblY      = document.getElementById('lbl-yearly');
    const saveChip  = document.getElementById('saveChip');
    const amtPro    = document.getElementById('amt-pro');
    const periodPro = document.getElementById('period-pro');
    const notePro   = document.getElementById('note-pro');

    toggle.classList.toggle('on', isYearly);
    lblM.classList.toggle('active', !isYearly);
    lblY.classList.toggle('active', isYearly);
    saveChip.classList.toggle('visible', isYearly);

    const data = isYearly ? prices.yearly : prices.monthly;

    // Animate number flip
    amtPro.style.transform = 'translateY(-8px)';
    amtPro.style.opacity   = '0';
    setTimeout(() => {
      amtPro.textContent      = data.pro;
      periodPro.textContent   = data.label;
      notePro.textContent     = data.note;
      amtPro.style.transition = 'all 0.25s ease';
      amtPro.style.transform  = 'translateY(0)';
      amtPro.style.opacity    = '1';
    }, 180);
  }
Categories

Pricing Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
