12 CSS Neon Designs 08 / 12

Neon Cyberpunk Palette

A complete design-token showcase for a pink/blue cyberpunk palette — five glowing swatch chips, three italic display headlines, three button variants, and an animated gradient-border card showing the actual CSS custom-property variable list inside.

Best fordesign system showcases, cyberpunk style guides, branding pages, dev-portfolio palette demos.

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

The code

<section class="nn-pal" aria-label="Neon cyberpunk palette demo">
  <div class="stage">

    <div class="swatch-row">
      <div class="swatch">
        <div class="swatch-chip chip-cyan" aria-hidden="true"></div>
        <div class="swatch-hex">#00DBDE</div>
      </div>
      <div class="swatch">
        <div class="swatch-chip chip-pink" aria-hidden="true"></div>
        <div class="swatch-hex">#FC00FF</div>
      </div>
      <div class="swatch">
        <div class="swatch-chip chip-blue" aria-hidden="true"></div>
        <div class="swatch-hex">#0057FF</div>
      </div>
      <div class="swatch">
        <div class="swatch-chip chip-violet" aria-hidden="true"></div>
        <div class="swatch-hex">#8B00FF</div>
      </div>
      <div class="swatch swatch-wide">
        <div class="swatch-chip chip-dual" aria-hidden="true"></div>
        <div class="swatch-hex">Cyberpunk Gradient</div>
      </div>
    </div>

    <div class="text-block">
      <div class="headline-cyan">ELECTRIC</div>
      <div class="headline-pink">VOLTAGE</div>
      <div class="headline-dual">CYBERPUNK</div>
    </div>

    <div class="btn-group">
      <button class="gbtn gbtn-cyan" type="button">◈ Connect Cyan</button>
      <button class="gbtn gbtn-pink" type="button">◈ Engage Pink</button>
      <button class="gbtn gbtn-dual" type="button">◈ Dual Tone CTA</button>
    </div>

    <div class="card-dual">
      <div class="card-label">CSS Custom Properties — Cyberpunk Palette</div>
      <div class="card-dual-inner">
        <div class="token-list">
          <div><span class="var-name">--neon-cyan</span>:   <span class="var-val">#00dbde</span>; <span class="var-comment">/* electric teal */</span></div>
          <div><span class="var-name">--neon-pink</span>:   <span class="var-val">#fc00ff</span>; <span class="var-comment">/* hot magenta  */</span></div>
          <div><span class="var-name">--neon-blue</span>:   <span class="var-val">#0057ff</span>; <span class="var-comment">/* deep electric */</span></div>
          <div><span class="var-name">--neon-violet</span>: <span class="var-val">#8b00ff</span>; <span class="var-comment">/* mid spectrum  */</span></div>
          <div><span class="var-name">--glow-cyan</span>:   <span class="var-val">0 0 6px #fff, 0 0 14px var(--neon-cyan)...</span></div>
          <div><span class="var-name">--glow-pink</span>:   <span class="var-val">0 0 6px #fff, 0 0 14px var(--neon-pink)...</span></div>
        </div>
      </div>
    </div>

  </div>
</section>
/* ─── 08 Neon Cyberpunk Palette — design token showcase ────────── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,700;0,900;1,900&family=Share+Tech+Mono&display=swap');

/* Tokens scoped to .nn-pal — NOT :root — so they don't leak to host. */
.nn-pal {
  --nn-pal-cyan:    #00dbde;
  --nn-pal-pink:    #fc00ff;
  --nn-pal-blue:    #0057ff;
  --nn-pal-violet:  #8b00ff;
  --nn-pal-bg:      #050510;
  --nn-pal-surface: rgba(12, 8, 28, 0.9);

  --nn-pal-glow-cyan: 0 0 6px #fff, 0 0 14px var(--nn-pal-cyan), 0 0 32px var(--nn-pal-cyan), 0 0 64px rgba(0,219,222,0.5);
  --nn-pal-glow-pink: 0 0 6px #fff, 0 0 14px var(--nn-pal-pink), 0 0 32px var(--nn-pal-pink), 0 0 64px rgba(252,0,255,0.5);

  --nn-pal-tshadow-cyan: 0 0 4px #fff, 0 0 10px var(--nn-pal-cyan), 0 0 22px var(--nn-pal-cyan), 0 0 44px rgba(0,219,222,0.7);
  --nn-pal-tshadow-pink: 0 0 4px #fff, 0 0 10px var(--nn-pal-pink), 0 0 22px var(--nn-pal-pink), 0 0 44px rgba(252,0,255,0.7);

  position: relative;
  width: 100%;
  min-height: 780px;
  background: var(--nn-pal-bg);
  font-family: 'Exo 2', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Diagonal gradient wash — was body::before fixed; scoped. */
.nn-pal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 10% 50%, rgba(0,219,222,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 90% 50%, rgba(252,0,255,0.07) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0,87,255,0.04) 0%, transparent 50%, rgba(139,0,255,0.04) 100%);
  pointer-events: none;
  z-index: 0;
}

.nn-pal .stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding: 50px 60px;
  max-width: 860px;
  width: 100%;
}

.nn-pal .swatch-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  align-items: center;
}
.nn-pal .swatch { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nn-pal .swatch-wide { flex: 2; }
.nn-pal .swatch-chip {
  height: 44px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.nn-pal .swatch-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%);
}
.nn-pal .chip-cyan   { background: var(--nn-pal-cyan);   box-shadow: 0 0 20px rgba(0,219,222,0.7), 0 0 50px rgba(0,219,222,0.3); }
.nn-pal .chip-pink   { background: var(--nn-pal-pink);   box-shadow: 0 0 20px rgba(252,0,255,0.7), 0 0 50px rgba(252,0,255,0.3); }
.nn-pal .chip-blue   { background: var(--nn-pal-blue);   box-shadow: 0 0 20px rgba(0,87,255,0.7),  0 0 50px rgba(0,87,255,0.3); }
.nn-pal .chip-violet { background: var(--nn-pal-violet); box-shadow: 0 0 20px rgba(139,0,255,0.7), 0 0 50px rgba(139,0,255,0.3); }
.nn-pal .chip-dual {
  background: linear-gradient(90deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink));
  box-shadow: 0 0 20px rgba(0,219,222,0.5), 0 0 50px rgba(252,0,255,0.4);
}
.nn-pal .swatch-hex {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(200,200,240,0.55);
  text-align: center;
}

.nn-pal .text-block { display: flex; flex-direction: column; gap: 12px; }
.nn-pal .headline-cyan {
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--nn-pal-cyan);
  text-shadow: var(--nn-pal-tshadow-cyan);
  line-height: 1;
}
.nn-pal .headline-pink {
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--nn-pal-pink);
  text-shadow: var(--nn-pal-tshadow-pink);
  line-height: 1;
}
.nn-pal .headline-dual {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--nn-pal-cyan) 0%, var(--nn-pal-violet) 50%, var(--nn-pal-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,219,222,0.6)) drop-shadow(0 0 18px rgba(252,0,255,0.5));
}

.nn-pal .btn-group { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.nn-pal .gbtn {
  padding: 14px 28px;
  font-family: 'Exo 2', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.nn-pal .gbtn-cyan {
  background: transparent;
  color: var(--nn-pal-cyan);
  border: 1.5px solid var(--nn-pal-cyan);
  text-shadow: 0 0 8px rgba(0,219,222,0.8);
  box-shadow: var(--nn-pal-glow-cyan);
  animation: nn-pal-pulsecyan 2.5s ease-in-out infinite;
}
@keyframes nn-pal-pulsecyan {
  0%, 100% { box-shadow: 0 0 8px rgba(0,219,222,0.4), 0 0 24px rgba(0,219,222,0.2); }
  50%      { box-shadow: 0 0 18px rgba(0,219,222,0.75), 0 0 50px rgba(0,219,222,0.35); }
}
.nn-pal .gbtn-pink {
  background: linear-gradient(90deg, rgba(252,0,255,0.15), rgba(139,0,255,0.15));
  color: #fff;
  border: 1.5px solid var(--nn-pal-pink);
  text-shadow: 0 0 8px rgba(252,0,255,0.8);
  box-shadow: var(--nn-pal-glow-pink);
}
.nn-pal .gbtn-dual {
  background: linear-gradient(90deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink));
  color: #000;
  border: none;
  box-shadow: 0 0 24px rgba(0,219,222,0.5), 0 0 50px rgba(252,0,255,0.35);
  font-weight: 900;
}

.nn-pal .card-dual {
  grid-column: 1 / -1;
  position: relative;
  padding: 28px 32px;
  background: var(--nn-pal-surface);
  overflow: hidden;
}
.nn-pal .card-dual::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nn-pal-bordercycle 4s linear infinite;
}
@keyframes nn-pal-bordercycle {
  0%   { background: linear-gradient(135deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink)); }
  33%  { background: linear-gradient(135deg, var(--nn-pal-pink), var(--nn-pal-cyan), var(--nn-pal-violet)); }
  66%  { background: linear-gradient(135deg, var(--nn-pal-violet), var(--nn-pal-pink), var(--nn-pal-cyan)); }
  100% { background: linear-gradient(135deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink)); }
}
.nn-pal .card-dual-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nn-pal .card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,200,240,0.35);
  margin-bottom: 12px;
}
.nn-pal .token-list {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  line-height: 2;
  color: rgba(200,200,240,0.65);
}
.nn-pal .token-list .var-name    { color: var(--nn-pal-cyan); }
.nn-pal .token-list .var-val     { color: var(--nn-pal-pink); }
.nn-pal .token-list .var-comment { color: rgba(150,150,200,0.4); }

@media (max-width: 720px) {
  .nn-pal .stage { grid-template-columns: 1fr; }
  .nn-pal .swatch-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-pal .gbtn-cyan,
  .nn-pal .card-dual::before { animation: none !important; }
}

More from 12 CSS Neon Designs

Neon SVG IconsRainbow Neon TextSynthwave SceneNeon Form ControlsNeon NavigationInfinite Neon GridNeon ButtonsNeon TypographyNeon Pricing CardsNeon Flickering SignTailwind Neon Config
View the full collection →

Search CodeFronts

Loading…

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