12 CSS Neon Designs02 / 12

Pure CSSMIT licensed

Neon Typography

Five neon text treatments arranged like a row of vintage bar signs — a classic cyan tube reading "OPEN 24/7", a flickering pink "NOVA CLUB" with two letters wired as dead bulbs that intermittently glow back to half-life, a chroma-shifting "CYBERPUNK" outline that cycles through pink/yellow/cyan/blue gradient stops, a breathing violet "PHANTOM" in Monoton, and a warm amber "LIVE MUSIC" framed by pulsing star glyphs. Each effect uses layered text-shadow stacks (6 layers deep on the cyan tube) to fake the gaslight-style outer glow that single-shadow approximations always miss. CRT scanlines overlay the entire stage. Boogaloo + Bebas Neue + Special Elite + Monoton. Best for music venues, bar/restaurant sites, retro-gaming, vaporwave/cyberpunk hero sections.

Published

Live Demo
Try it

The code

<section class="nn-typ" aria-label="Neon typography demo">
  <div class="stage">
    <div class="neon-classic">OPEN 24/7</div>

    <div class="neon-flicker" aria-label="NOVA CLUB">
      <span style="--d:3.5s;--del:0s">N</span><span style="--d:4.2s;--del:0.2s">O</span><span class="dead" style="--d:5s;--del:0.1s">V</span><span style="--d:3.8s;--del:0.4s">A</span>
      <span class="gap" aria-hidden="true">&nbsp;</span>
      <span style="--d:4.5s;--del:0.3s">C</span><span class="dead" style="--d:6s;--del:0.2s">L</span><span style="--d:3.2s;--del:0s">U</span><span style="--d:5.1s;--del:0.5s">B</span>
    </div>

    <div class="neon-outline">CYBERPUNK</div>

    <div class="neon-intense">PHANTOM</div>

    <div class="neon-frame">
      <span class="neon-frame-text">LIVE MUSIC</span>
    </div>
  </div>
</section>
/* ─── 02 Neon Typography — retro signage / vintage bar signs ───── */

@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Bebas+Neue&family=Special+Elite&family=Monoton&display=swap');

.nn-typ {
  position: relative;
  width: 100%;
  min-height: 700px;
  background: #060614;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nn-typ *,
.nn-typ *::before,
.nn-typ *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Scanlines overlay — was body::after at z-index 100; scoped to
   wrapper at z-index 5 so it covers the demo without escaping. */

.nn-typ::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.08) 3px,
      rgba(0,0,0,0.08) 4px
    );
  pointer-events: none;
  z-index: 5;
}

.nn-typ .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
  padding: 50px 60px;
}
/* 1 — CLASSIC CYAN NEON SIGN */

.nn-typ .neon-classic {
  font-family: 'Boogaloo', cursive;
  font-size: 72px;
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 0 30px #00eeff, 0 0 55px #00eeff, 0 0 80px #00eeff, 0 0 120px #00eeff;
  letter-spacing: 0.05em;
}
/* 2 — FLICKERING BROKEN SIGN */

.nn-typ .neon-flicker {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 0.12em;
  color: #ff2d78;
  text-shadow: 0 0 5px #ff2d78, 0 0 15px #ff2d78, 0 0 30px #ff2d78, 0 0 60px #ff2d78, 0 0 100px #ff2d78;
}

.nn-typ .neon-flicker span {
  display: inline-block;
  animation: nn-typ-flicker1 var(--d, 3s) var(--del, 0s) infinite;
}

.nn-typ .neon-flicker .dead {
  color: rgba(255,45,120,0.18);
  text-shadow: none;
  animation: nn-typ-deadbulb var(--d, 4s) var(--del, 0s) infinite;
}

@keyframes nn-typ-flicker1 {
  0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
    text-shadow: 0 0 4px #ff2d78, 0 0 12px #ff2d78, 0 0 26px #ff2d78, 0 0 52px #ff2d78, 0 0 90px #ff2d78;
    color: #ff2d78;
  }

  20%,
    24%,
    55% {
    text-shadow: none;
    color: rgba(255,45,120,0.15);
  }
}

@keyframes nn-typ-deadbulb {
  0%,
    45%,
    55%,
    100% {
    color: rgba(255,45,120,0.18);
    text-shadow: none;
  }

  48%,
    52% {
    color: rgba(255,45,120,0.55);
    text-shadow: 0 0 8px rgba(255,45,120,0.4);
  }
}
/* 3 — MULTICOLOR STROKE OUTLINE */

.nn-typ .neon-outline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #ff00cc 0%, #ffcc00 35%, #00ffcc 65%, #00aaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,0,204,0.6)) drop-shadow(0 0 20px rgba(0,255,204,0.4));
  animation: nn-typ-chroma 5s ease-in-out infinite alternate;
}

@keyframes nn-typ-chroma {
  0% {
    filter: drop-shadow(0 0 8px rgba(255,0,204,0.7)) drop-shadow(0 0 22px rgba(0,255,204,0.35));
  }

  50% {
    filter: drop-shadow(0 0 16px rgba(255,204,0,0.8)) drop-shadow(0 0 36px rgba(0,170,255,0.4));
  }

  100% {
    filter: drop-shadow(0 0 8px rgba(0,255,204,0.7)) drop-shadow(0 0 22px rgba(255,0,204,0.35));
  }
}
/* 4 — SINGLE WORD INTENSE VIOLET */

.nn-typ .neon-intense {
  font-family: 'Monoton', cursive;
  font-size: 52px;
  color: #e040fb;
  letter-spacing: 0.25em;
  text-shadow: 0 0 2px #fff, 0 0 6px #e040fb, 0 0 16px #e040fb, 0 0 32px #e040fb, 0 0 55px #7b00d4, 0 0 90px #7b00d4;
  animation: nn-typ-breathe 3s ease-in-out infinite;
}

@keyframes nn-typ-breathe {
  0%,
    100% {
    text-shadow: 0 0 2px #fff, 0 0 6px #e040fb, 0 0 16px #e040fb, 0 0 32px #e040fb, 0 0 55px #7b00d4, 0 0 90px #7b00d4;
  }

  50% {
    text-shadow: 0 0 2px #fff, 0 0 10px #e040fb, 0 0 28px #e040fb, 0 0 52px #e040fb, 0 0 80px #b040fb, 0 0 140px #7b00d4;
  }
}
/* 5 — RETRO SIGN FRAME */

.nn-typ .neon-frame {
  position: relative;
  padding: 18px 40px;
  border: 2px solid rgba(255, 220, 0, 0.3);
  box-shadow: 0 0 14px rgba(255,220,0,0.25), inset 0 0 14px rgba(255,220,0,0.05);
}

.nn-typ .neon-frame::before,
.nn-typ .neon-frame::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #ffdc00;
  text-shadow: 0 0 10px #ffdc00, 0 0 25px #ffdc00;
  animation: nn-typ-starpulse 2s ease-in-out infinite;
}

.nn-typ .neon-frame::before {
  left: 14px;
}

.nn-typ .neon-frame::after {
  right: 14px;
}

@keyframes nn-typ-starpulse {
  0%,
    100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.nn-typ .neon-frame-text {
  font-family: 'Special Elite', cursive;
  font-size: 38px;
  letter-spacing: 0.14em;
  color: #ffdc00;
  text-shadow: 0 0 4px #ffdc00, 0 0 12px #ffdc00, 0 0 26px rgba(255,180,0,0.9), 0 0 50px rgba(255,140,0,0.6);
  animation: nn-typ-warmglow 2.5s ease-in-out infinite;
}

@keyframes nn-typ-warmglow {
  0%,
    100% {
    text-shadow: 0 0 4px #ffdc00, 0 0 12px #ffdc00, 0 0 26px rgba(255,180,0,0.9), 0 0 50px rgba(255,140,0,0.6);
  }

  50% {
    text-shadow: 0 0 6px #fff, 0 0 16px #ffdc00, 0 0 38px rgba(255,180,0,1), 0 0 72px rgba(255,140,0,0.7);
  }
}

@media (max-width: 640px) {
  .nn-typ .neon-classic {
    font-size: 48px;
  }

  .nn-typ .neon-flicker {
    font-size: 42px;
  }

  .nn-typ .neon-outline {
    font-size: 56px;
  }

  .nn-typ .neon-intense {
    font-size: 36px;
  }

  .nn-typ .neon-frame-text {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nn-typ .neon-flicker span,
    .nn-typ .neon-outline,
    .nn-typ .neon-intense,
    .nn-typ .neon-frame::before,
    .nn-typ .neon-frame::after,
    .nn-typ .neon-frame-text {
    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 Typography
Source: https://codefronts.com/design-styles/css-neon/neon-typography/

Five neon text treatments arranged like a row of vintage bar signs — a classic cyan tube reading "OPEN 24/7", a flickering pink "NOVA CLUB" with two letters wired as dead bulbs that intermittently glow back to half-life, a chroma-shifting "CYBERPUNK" outline that cycles through pink/yellow/cyan/blue gradient stops, a breathing violet "PHANTOM" in Monoton, and a warm amber "LIVE MUSIC" framed by pulsing star glyphs. Each effect uses layered text-shadow stacks (6 layers deep on the cyan tube) to fake the gaslight-style outer glow that single-shadow approximations always miss. CRT scanlines overlay the entire stage. Boogaloo + Bebas Neue + Special Elite + Monoton. Best for music venues, bar/restaurant sites, retro-gaming, vaporwave/cyberpunk hero sections.
## HTML
```html
<section class="nn-typ" aria-label="Neon typography demo">
  <div class="stage">
    <div class="neon-classic">OPEN 24/7</div>

    <div class="neon-flicker" aria-label="NOVA CLUB">
      <span style="--d:3.5s;--del:0s">N</span><span style="--d:4.2s;--del:0.2s">O</span><span class="dead" style="--d:5s;--del:0.1s">V</span><span style="--d:3.8s;--del:0.4s">A</span>
      <span class="gap" aria-hidden="true">&nbsp;</span>
      <span style="--d:4.5s;--del:0.3s">C</span><span class="dead" style="--d:6s;--del:0.2s">L</span><span style="--d:3.2s;--del:0s">U</span><span style="--d:5.1s;--del:0.5s">B</span>
    </div>

    <div class="neon-outline">CYBERPUNK</div>

    <div class="neon-intense">PHANTOM</div>

    <div class="neon-frame">
      <span class="neon-frame-text">LIVE MUSIC</span>
    </div>
  </div>
</section>
```
## CSS
```css
/* ─── 02 Neon Typography — retro signage / vintage bar signs ───── */

@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Bebas+Neue&family=Special+Elite&family=Monoton&display=swap');

.nn-typ {
  position: relative;
  width: 100%;
  min-height: 700px;
  background: #060614;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nn-typ *,
.nn-typ *::before,
.nn-typ *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Scanlines overlay — was body::after at z-index 100; scoped to
   wrapper at z-index 5 so it covers the demo without escaping. */

.nn-typ::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.08) 3px,
      rgba(0,0,0,0.08) 4px
    );
  pointer-events: none;
  z-index: 5;
}

.nn-typ .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
  padding: 50px 60px;
}
/* 1 — CLASSIC CYAN NEON SIGN */

.nn-typ .neon-classic {
  font-family: 'Boogaloo', cursive;
  font-size: 72px;
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 0 30px #00eeff, 0 0 55px #00eeff, 0 0 80px #00eeff, 0 0 120px #00eeff;
  letter-spacing: 0.05em;
}
/* 2 — FLICKERING BROKEN SIGN */

.nn-typ .neon-flicker {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 0.12em;
  color: #ff2d78;
  text-shadow: 0 0 5px #ff2d78, 0 0 15px #ff2d78, 0 0 30px #ff2d78, 0 0 60px #ff2d78, 0 0 100px #ff2d78;
}

.nn-typ .neon-flicker span {
  display: inline-block;
  animation: nn-typ-flicker1 var(--d, 3s) var(--del, 0s) infinite;
}

.nn-typ .neon-flicker .dead {
  color: rgba(255,45,120,0.18);
  text-shadow: none;
  animation: nn-typ-deadbulb var(--d, 4s) var(--del, 0s) infinite;
}

@keyframes nn-typ-flicker1 {
  0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
    text-shadow: 0 0 4px #ff2d78, 0 0 12px #ff2d78, 0 0 26px #ff2d78, 0 0 52px #ff2d78, 0 0 90px #ff2d78;
    color: #ff2d78;
  }

  20%,
    24%,
    55% {
    text-shadow: none;
    color: rgba(255,45,120,0.15);
  }
}

@keyframes nn-typ-deadbulb {
  0%,
    45%,
    55%,
    100% {
    color: rgba(255,45,120,0.18);
    text-shadow: none;
  }

  48%,
    52% {
    color: rgba(255,45,120,0.55);
    text-shadow: 0 0 8px rgba(255,45,120,0.4);
  }
}
/* 3 — MULTICOLOR STROKE OUTLINE */

.nn-typ .neon-outline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #ff00cc 0%, #ffcc00 35%, #00ffcc 65%, #00aaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,0,204,0.6)) drop-shadow(0 0 20px rgba(0,255,204,0.4));
  animation: nn-typ-chroma 5s ease-in-out infinite alternate;
}

@keyframes nn-typ-chroma {
  0% {
    filter: drop-shadow(0 0 8px rgba(255,0,204,0.7)) drop-shadow(0 0 22px rgba(0,255,204,0.35));
  }

  50% {
    filter: drop-shadow(0 0 16px rgba(255,204,0,0.8)) drop-shadow(0 0 36px rgba(0,170,255,0.4));
  }

  100% {
    filter: drop-shadow(0 0 8px rgba(0,255,204,0.7)) drop-shadow(0 0 22px rgba(255,0,204,0.35));
  }
}
/* 4 — SINGLE WORD INTENSE VIOLET */

.nn-typ .neon-intense {
  font-family: 'Monoton', cursive;
  font-size: 52px;
  color: #e040fb;
  letter-spacing: 0.25em;
  text-shadow: 0 0 2px #fff, 0 0 6px #e040fb, 0 0 16px #e040fb, 0 0 32px #e040fb, 0 0 55px #7b00d4, 0 0 90px #7b00d4;
  animation: nn-typ-breathe 3s ease-in-out infinite;
}

@keyframes nn-typ-breathe {
  0%,
    100% {
    text-shadow: 0 0 2px #fff, 0 0 6px #e040fb, 0 0 16px #e040fb, 0 0 32px #e040fb, 0 0 55px #7b00d4, 0 0 90px #7b00d4;
  }

  50% {
    text-shadow: 0 0 2px #fff, 0 0 10px #e040fb, 0 0 28px #e040fb, 0 0 52px #e040fb, 0 0 80px #b040fb, 0 0 140px #7b00d4;
  }
}
/* 5 — RETRO SIGN FRAME */

.nn-typ .neon-frame {
  position: relative;
  padding: 18px 40px;
  border: 2px solid rgba(255, 220, 0, 0.3);
  box-shadow: 0 0 14px rgba(255,220,0,0.25), inset 0 0 14px rgba(255,220,0,0.05);
}

.nn-typ .neon-frame::before,
.nn-typ .neon-frame::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #ffdc00;
  text-shadow: 0 0 10px #ffdc00, 0 0 25px #ffdc00;
  animation: nn-typ-starpulse 2s ease-in-out infinite;
}

.nn-typ .neon-frame::before {
  left: 14px;
}

.nn-typ .neon-frame::after {
  right: 14px;
}

@keyframes nn-typ-starpulse {
  0%,
    100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.nn-typ .neon-frame-text {
  font-family: 'Special Elite', cursive;
  font-size: 38px;
  letter-spacing: 0.14em;
  color: #ffdc00;
  text-shadow: 0 0 4px #ffdc00, 0 0 12px #ffdc00, 0 0 26px rgba(255,180,0,0.9), 0 0 50px rgba(255,140,0,0.6);
  animation: nn-typ-warmglow 2.5s ease-in-out infinite;
}

@keyframes nn-typ-warmglow {
  0%,
    100% {
    text-shadow: 0 0 4px #ffdc00, 0 0 12px #ffdc00, 0 0 26px rgba(255,180,0,0.9), 0 0 50px rgba(255,140,0,0.6);
  }

  50% {
    text-shadow: 0 0 6px #fff, 0 0 16px #ffdc00, 0 0 38px rgba(255,180,0,1), 0 0 72px rgba(255,140,0,0.7);
  }
}

@media (max-width: 640px) {
  .nn-typ .neon-classic {
    font-size: 48px;
  }

  .nn-typ .neon-flicker {
    font-size: 42px;
  }

  .nn-typ .neon-outline {
    font-size: 56px;
  }

  .nn-typ .neon-intense {
    font-size: 36px;
  }

  .nn-typ .neon-frame-text {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nn-typ .neon-flicker span,
    .nn-typ .neon-outline,
    .nn-typ .neon-intense,
    .nn-typ .neon-frame::before,
    .nn-typ .neon-frame::after,
    .nn-typ .neon-frame-text {
    animation: none !important;
  }
}
```

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →