12 CSS Neon Designs 02 / 12

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.

Best formusic venues, bar/restaurant sites, retro-gaming, vaporwave/cyberpunk hero sections.

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

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; }
}

More from 12 CSS Neon Designs

Synthwave SceneNeon Form ControlsNeon NavigationInfinite Neon GridNeon ButtonsNeon Pricing CardsNeon Flickering SignNeon Cyberpunk PaletteTailwind Neon ConfigNeon SVG IconsRainbow Neon Text
View the full collection →

Search CodeFronts

Loading…

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