12 CSS Neon Designs08 / 12

Pure CSSMIT licensed

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. Five glowing swatch chips along the top (cyan #00DBDE, pink #FC00FF, electric blue #0057FF, violet #8B00FF, plus a wide cyan→violet→pink dual-tone gradient). The middle row stacks three italic display headlines — "ELECTRIC" in cyan, "VOLTAGE" in pink, "CYBERPUNK" as a tri-stop gradient — alongside three button variants (cyan pulse, pink-bordered with text-shadow, dual-tone gradient CTA). The bottom card uses mask-composite to draw an animated gradient border (cyan→violet→pink cycling through three rotations) around a Share Tech Mono token list that reads like the actual CSS variable definitions: `--neon-cyan: #00dbde;` etc. Every glow on the page resolves to one of the six CSS custom properties defined at the top. Exo 2 + Share Tech Mono. Best for design system showcases, cyberpunk style guides, branding pages, dev-portfolio palette demos.

Published

Live Demo
Try it

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;
  }
}
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 Cyberpunk Palette
Source: https://codefronts.com/design-styles/css-neon/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. Five glowing swatch chips along the top (cyan #00DBDE, pink #FC00FF, electric blue #0057FF, violet #8B00FF, plus a wide cyan→violet→pink dual-tone gradient). The middle row stacks three italic display headlines — "ELECTRIC" in cyan, "VOLTAGE" in pink, "CYBERPUNK" as a tri-stop gradient — alongside three button variants (cyan pulse, pink-bordered with text-shadow, dual-tone gradient CTA). The bottom card uses mask-composite to draw an animated gradient border (cyan→violet→pink cycling through three rotations) around a Share Tech Mono token list that reads like the actual CSS variable definitions: `--neon-cyan: #00dbde;` etc. Every glow on the page resolves to one of the six CSS custom properties defined at the top. Exo 2 + Share Tech Mono. Best for design system showcases, cyberpunk style guides, branding pages, dev-portfolio palette demos.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```

Techniques used in this demo

mask-compositeMDN ↗background-clip: textMDN ↗filterMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →