12 CSS Neon Designs03 / 12

Pure CSSMIT licensed

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. The trick is CSS @property: registering --a as a typed <angle> means it can be interpolated, so a simple to-360deg keyframe spins the gradient smoothly. Pseudo-elements stack the rotating gradient under a solid card background so only the 1.5px ring edge shows. Hover lifts the card and intensifies the ring glow. Feature lists use arrow bullets colored to the tier. CTAs vary by tier: outlined cyan, solid pink gradient, outlined violet. Space Grotesk + Exo 2. Best for SaaS pricing pages, hosting/devtool tiers, cyberpunk product comparison.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Neon Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Neon Pricing Cards
Source: https://codefronts.com/design-styles/css-neon/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. The trick is CSS @property: registering --a as a typed <angle> means it can be interpolated, so a simple to-360deg keyframe spins the gradient smoothly. Pseudo-elements stack the rotating gradient under a solid card background so only the 1.5px ring edge shows. Hover lifts the card and intensifies the ring glow. Feature lists use arrow bullets colored to the tier. CTAs vary by tier: outlined cyan, solid pink gradient, outlined violet. Space Grotesk + Exo 2. Best for SaaS pricing pages, hosting/devtool tiers, cyberpunk product comparison.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```

Techniques used in this demo

@propertyMDN ↗conic-gradient()MDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →