12 CSS Neon Designs 03 / 12

Neon Pricing Cards

A three-tier pricing layout — Starter (cyan), Pro (pink, featured with "Most Popular" badge), Enterprise (violet) — each ringed by a conic-gradient border that rotates continuously.

Best forSaaS pricing pages, hosting/devtool tiers, cyberpunk product comparison.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="nn-crd" aria-label="Neon pricing cards demo">
  <div class="stage">

    <article class="card card-cyan">
      <div class="card-tier">Starter</div>
      <div>
        <div class="card-price"><sup>$</sup>9</div>
        <div class="card-period">per month</div>
      </div>
      <div class="card-divider" aria-hidden="true"></div>
      <ul class="card-features">
        <li>5 active projects</li>
        <li>10 GB cloud storage</li>
        <li>API access (1k req/day)</li>
        <li>Community support</li>
      </ul>
      <button class="card-cta" type="button">Get Started</button>
    </article>

    <article class="card card-pink card-featured">
      <div class="badge">Most Popular</div>
      <div class="card-tier">Pro</div>
      <div>
        <div class="card-price"><sup>$</sup>29</div>
        <div class="card-period">per month</div>
      </div>
      <div class="card-divider" aria-hidden="true"></div>
      <ul class="card-features">
        <li>Unlimited projects</li>
        <li>100 GB cloud storage</li>
        <li>API access (unlimited)</li>
        <li>Priority support 24/7</li>
        <li>Custom domains</li>
      </ul>
      <button class="card-cta" type="button">Upgrade Now</button>
    </article>

    <article class="card card-violet">
      <div class="card-tier">Enterprise</div>
      <div>
        <div class="card-price"><sup>$</sup>99</div>
        <div class="card-period">per month</div>
      </div>
      <div class="card-divider" aria-hidden="true"></div>
      <ul class="card-features">
        <li>Unlimited everything</li>
        <li>1 TB cloud storage</li>
        <li>Dedicated servers</li>
        <li>SLA 99.99% uptime</li>
        <li>White-label option</li>
      </ul>
      <button class="card-cta" type="button">Contact Sales</button>
    </article>

  </div>
</section>
/* ─── 03 Neon Pricing Cards — rotating conic-gradient border ───── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Exo+2:wght@300;700;900&display=swap');

/* @property is a document-level registration; can't be scoped to a
   wrapper. Declared once here and referenced from .nn-crd. */
@property --nn-crd-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.nn-crd {
  position: relative;
  width: 100%;
  min-height: 640px;
  background: #070711;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  font-family: 'Space Grotesk', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Ambient gradient backdrop — was body::before fixed; scoped. */
.nn-crd::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 50%, rgba(0,180,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 50%, rgba(180,0,255,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.nn-crd .stage {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 28px;
  padding: 24px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

.nn-crd .card {
  position: relative;
  width: 220px;
  padding: 32px 24px 28px;
  border-radius: 4px;
  background: rgba(12,12,28,0.95);
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.nn-crd .card-featured { padding-top: 40px; }
.nn-crd .card:hover { transform: translateY(-6px); }

/* Rotating conic border via pseudo */
.nn-crd .card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 6px;
  background: conic-gradient(
    from var(--nn-crd-a),
    var(--c1) 0deg,
    var(--c2) 90deg,
    transparent 130deg,
    transparent 230deg,
    var(--c2) 270deg,
    var(--c1) 360deg
  );
  animation: nn-crd-spin 3s linear infinite;
  z-index: 0;
}
@keyframes nn-crd-spin { to { --nn-crd-a: 360deg; } }

.nn-crd .card::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 3px;
  background: #0c0c1e;
  z-index: 1;
}
.nn-crd .card > * { position: relative; z-index: 2; }

.nn-crd .card-cyan   { --c1: #00eeff; --c2: rgba(0,238,255,0.3); }
.nn-crd .card-pink   { --c1: #ff2d78; --c2: rgba(255,45,120,0.3); }
.nn-crd .card-violet { --c1: #bf5fff; --c2: rgba(191,95,255,0.3); }

.nn-crd .card-cyan:hover::before   { box-shadow: 0 0 28px rgba(0,238,255,0.45),  0 0 60px rgba(0,238,255,0.2); }
.nn-crd .card-pink:hover::before   { box-shadow: 0 0 28px rgba(255,45,120,0.45), 0 0 60px rgba(255,45,120,0.2); }
.nn-crd .card-violet:hover::before { box-shadow: 0 0 28px rgba(191,95,255,0.45), 0 0 60px rgba(191,95,255,0.2); }

/* Content */
.nn-crd .card-tier {
  font-family: 'Exo 2', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nn-crd .card-cyan   .card-tier { color: #00eeff; text-shadow: 0 0 10px #00eeff; }
.nn-crd .card-pink   .card-tier { color: #ff2d78; text-shadow: 0 0 10px #ff2d78; }
.nn-crd .card-violet .card-tier { color: #bf5fff; text-shadow: 0 0 10px #bf5fff; }

.nn-crd .card-price {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: 42px;
  color: #f0f0ff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.nn-crd .card-price sup {
  font-size: 18px;
  font-weight: 600;
  vertical-align: super;
  color: rgba(240,240,255,0.6);
}
.nn-crd .card-period {
  font-size: 12px;
  color: rgba(240,240,255,0.35);
  margin-top: 2px;
  letter-spacing: 0.05em;
}

.nn-crd .card-divider { height: 1px; background: rgba(255,255,255,0.07); }
.nn-crd .card-cyan   .card-divider { background: linear-gradient(90deg, transparent, rgba(0,238,255,0.35), transparent); }
.nn-crd .card-pink   .card-divider { background: linear-gradient(90deg, transparent, rgba(255,45,120,0.35), transparent); }
.nn-crd .card-violet .card-divider { background: linear-gradient(90deg, transparent, rgba(191,95,255,0.35), transparent); }

.nn-crd .card-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nn-crd .card-features li {
  font-size: 12px;
  color: rgba(210,210,240,0.7);
  padding-left: 18px;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.nn-crd .card-features li::before {
  content: '▸';
  position: absolute;
  left: 0;
  font-size: 10px;
}
.nn-crd .card-cyan   .card-features li::before { color: #00eeff; text-shadow: 0 0 6px #00eeff; }
.nn-crd .card-pink   .card-features li::before { color: #ff2d78; text-shadow: 0 0 6px #ff2d78; }
.nn-crd .card-violet .card-features li::before { color: #bf5fff; text-shadow: 0 0 6px #bf5fff; }

.nn-crd .card-cta {
  margin-top: auto;
  padding: 11px 0;
  text-align: center;
  font-family: 'Exo 2', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  transition: all 0.25s ease;
  width: 100%;
}
.nn-crd .card-cyan .card-cta {
  background: rgba(0,238,255,0.1);
  color: #00eeff;
  border: 1px solid rgba(0,238,255,0.5);
  text-shadow: 0 0 8px rgba(0,238,255,0.8);
  box-shadow: 0 0 12px rgba(0,238,255,0.15);
}
.nn-crd .card-cyan .card-cta:hover { background: rgba(0,238,255,0.22); box-shadow: 0 0 22px rgba(0,238,255,0.4); }
.nn-crd .card-pink .card-cta {
  background: linear-gradient(135deg, rgba(255,45,120,0.85), rgba(200,20,90,0.85));
  color: #fff;
  text-shadow: 0 0 8px rgba(255,45,120,0.5);
  box-shadow: 0 0 18px rgba(255,45,120,0.4), 0 0 40px rgba(255,45,120,0.15);
}
.nn-crd .card-pink .card-cta:hover { box-shadow: 0 0 28px rgba(255,45,120,0.65), 0 0 60px rgba(255,45,120,0.25); }
.nn-crd .card-violet .card-cta {
  background: rgba(191,95,255,0.12);
  color: #bf5fff;
  border: 1px solid rgba(191,95,255,0.5);
  text-shadow: 0 0 8px rgba(191,95,255,0.8);
  box-shadow: 0 0 12px rgba(191,95,255,0.15);
}
.nn-crd .card-violet .card-cta:hover { background: rgba(191,95,255,0.22); box-shadow: 0 0 22px rgba(191,95,255,0.4); }

.nn-crd .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Exo 2', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 14px;
  background: linear-gradient(135deg, #ff2d78, #d4006a);
  color: #fff;
  z-index: 10;
  text-shadow: 0 0 6px rgba(255,45,120,0.8);
  box-shadow: 0 0 12px rgba(255,45,120,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .nn-crd .card::before { animation: none !important; }
  .nn-crd .card { transition: none !important; }
}

More from 12 CSS Neon Designs

Neon Cyberpunk PaletteTailwind Neon ConfigNeon SVG IconsRainbow Neon TextSynthwave SceneNeon Form ControlsNeon NavigationInfinite Neon GridNeon ButtonsNeon TypographyNeon Flickering Sign
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →