12 CSS Neon Designs 07 / 12

Neon Flickering Sign

Three distinct broken-sign CSS techniques side-by-side — a whole-word fault on "OPEN BAR", per-letter staggered animations on "NIGHTLIF" with two dead-bulb characters, and a vintage amber "Grand Hotel" with mechanical hum.

Best forvintage bar/restaurant sites, dive-bar branding, retrowave horror, neo-noir film promo.

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

The code

<section class="nn-flk" aria-label="Neon flickering sign demo">
  <div class="glow-pool pink" aria-hidden="true"></div>
  <div class="glow-pool cyan" aria-hidden="true"></div>
  <div class="glow-pool amber" aria-hidden="true"></div>

  <div class="scene">
    <div class="sign sign-bar">OPEN BAR</div>

    <div class="sign sign-word" aria-label="NIGHTLIF (E missing — dead tube)">
      <span class="letter">N</span>
      <span class="letter">I</span>
      <span class="letter">G</span>
      <span class="letter">H</span>
      <span class="letter">T</span>
      <span class="letter">L</span>
      <span class="letter">I</span>
      <span class="letter">F</span>
    </div>

    <div class="sign sign-hotel">Grand Hotel</div>
  </div>
</section>
/* ─── 07 Neon Flickering Sign — three broken-sign techniques ───── */
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Yellowtail&family=Permanent+Marker&display=swap');

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

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

/* Dirty wall texture — was body::before fixed; scoped. */
.nn-flk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.04) 8px, rgba(0,0,0,0.04) 9px);
  pointer-events: none;
  z-index: 0;
}

/* Ambient floor light pools — were position:fixed; scoped. */
.nn-flk .glow-pool {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}
.nn-flk .glow-pool.pink  { width: 300px; height: 80px; left:  12%; background: #ff2d78; animation: nn-flk-poolpulse 5s 0s ease-in-out infinite; }
.nn-flk .glow-pool.cyan  { width: 340px; height: 80px; left:  42%; background: #00eeff; animation: nn-flk-poolpulse 6s 1s ease-in-out infinite; }
.nn-flk .glow-pool.amber { width: 280px; height: 80px; right: 10%; background: #ffd200; animation: nn-flk-poolpulse 7s 2s ease-in-out infinite; }
@keyframes nn-flk-poolpulse { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.08; } }

.nn-flk .scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 60px 20px;
}

.nn-flk .sign {
  font-family: 'Boogaloo', cursive;
  letter-spacing: 0.08em;
  user-select: none;
}

/* SIGN 1 — whole-word flicker */
.nn-flk .sign-bar {
  font-size: 96px;
  color: #ff2d78;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #fff,
    0 0 20px #ff2d78,
    0 0 40px #ff2d78,
    0 0 80px #ff2d78,
    0 0 120px #c0003a;
  animation: nn-flk-sign 6s linear infinite;
}
@keyframes nn-flk-sign {
  0%,  9%,  11%, 30%, 32%, 64%, 70%, 72%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 20px #ff2d78,
      0 0 40px #ff2d78,
      0 0 80px #ff2d78,
      0 0 120px #c0003a;
    color: #ff2d78;
    opacity: 1;
  }
  10% { opacity: 0.08; text-shadow: none; color: rgba(255,45,120,0.15); }
  31% { opacity: 0.12; text-shadow: none; color: rgba(255,45,120,0.2); }
  65%, 71% { opacity: 0.06; text-shadow: none; color: rgba(255,45,120,0.1); }
}

/* SIGN 2 — per-letter staggered fault */
.nn-flk .sign-word {
  display: flex;
  gap: 4px;
  font-size: 80px;
}
.nn-flk .letter {
  display: inline-block;
  color: #00eeff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #00eeff,
    0 0 28px #00eeff,
    0 0 56px #0088aa,
    0 0 100px #0055ff;
}
.nn-flk .letter:nth-child(1) { animation: nn-flk-buzz    4.5s 0.0s infinite; }
.nn-flk .letter:nth-child(2) { animation: nn-flk-buzz    5.2s 0.8s infinite; }
.nn-flk .letter:nth-child(3) { animation: nn-flk-dead    7.0s 1.4s infinite; }
.nn-flk .letter:nth-child(4) { animation: nn-flk-buzz    3.8s 0.3s infinite; }
.nn-flk .letter:nth-child(5) { animation: nn-flk-buzz    6.1s 2.1s infinite; }
.nn-flk .letter:nth-child(6) { animation: nn-flk-stutter 4.0s 0.5s infinite; }
.nn-flk .letter:nth-child(7) { animation: nn-flk-buzz    5.7s 1.0s infinite; }
.nn-flk .letter:nth-child(8) { animation: nn-flk-dead    9.0s 3.2s infinite; }

@keyframes nn-flk-buzz {
  0%, 95%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px #fff,
      0 0 12px #00eeff,
      0 0 28px #00eeff,
      0 0 56px #0088aa;
  }
  96% { opacity: 0.1; text-shadow: none; }
  97% { opacity: 1; text-shadow: 0 0 12px #00eeff, 0 0 28px #00eeff; }
  98% { opacity: 0.05; text-shadow: none; }
  99% { opacity: 1; text-shadow: 0 0 12px #00eeff, 0 0 28px #00eeff; }
}
@keyframes nn-flk-dead {
  0%, 40%, 100% { opacity: 0.08; color: rgba(0,238,255,0.12); text-shadow: none; }
  41%, 52% { opacity: 1; color: #00eeff; text-shadow: 0 0 12px #00eeff, 0 0 28px #00eeff, 0 0 56px #0088aa; }
  53%, 58% { opacity: 0.08; text-shadow: none; color: rgba(0,238,255,0.12); }
  59%, 62% { opacity: 0.9; color: #00eeff; text-shadow: 0 0 10px #00eeff; }
  63% { opacity: 0.08; text-shadow: none; color: rgba(0,238,255,0.12); }
}
@keyframes nn-flk-stutter {
  0%, 85%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px #fff,
      0 0 12px #00eeff,
      0 0 28px #00eeff,
      0 0 56px #0088aa;
  }
  86% { opacity: 0.2; text-shadow: none; }
  87% { opacity: 1; text-shadow: 0 0 12px #00eeff; }
  88% { opacity: 0.2; text-shadow: none; }
  89% { opacity: 1; text-shadow: 0 0 12px #00eeff; }
  90% { opacity: 0.2; text-shadow: none; }
  91% { opacity: 1; text-shadow: 0 0 28px #00eeff, 0 0 56px #0088aa; }
}

/* SIGN 3 — vintage amber Grand Hotel */
.nn-flk .sign-hotel {
  font-family: 'Yellowtail', cursive;
  font-size: 72px;
  color: #ffd200;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #ffd200,
    0 0 22px #ffd200,
    0 0 42px #ff9500,
    0 0 80px rgba(255,150,0,0.6);
  animation: nn-flk-hum 8s ease-in-out infinite, nn-flk-hotelfault 11s linear infinite;
  transform-origin: center;
}
@keyframes nn-flk-hum {
  0%, 100% { transform: none; }
  25% { transform: skewX(0.3deg); }
  75% { transform: skewX(-0.2deg); }
}
@keyframes nn-flk-hotelfault {
  0%, 20%, 22%, 60%, 100% {
    color: #ffd200;
    text-shadow:
      0 0 4px #fff,
      0 0 10px #ffd200,
      0 0 22px #ffd200,
      0 0 42px #ff9500,
      0 0 80px rgba(255,150,0,0.6);
    opacity: 1;
  }
  21% { color: rgba(255,210,0,0.1); text-shadow: none; opacity: 0.1; }
  61%, 63% { opacity: 0.12; color: rgba(255,210,0,0.15); text-shadow: none; }
  62% { opacity: 1; color: #ffd200; text-shadow: 0 0 10px #ffd200, 0 0 22px #ffd200; }
}

@media (max-width: 640px) {
  .nn-flk .sign-bar   { font-size: 56px; }
  .nn-flk .sign-word  { font-size: 48px; }
  .nn-flk .sign-hotel { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-flk .sign-bar,
  .nn-flk .letter,
  .nn-flk .sign-hotel,
  .nn-flk .glow-pool { animation: none !important; }
}

More from 12 CSS Neon Designs

Neon NavigationInfinite Neon GridNeon ButtonsNeon TypographyNeon Pricing CardsNeon Cyberpunk PaletteTailwind Neon ConfigNeon SVG IconsRainbow Neon TextSynthwave SceneNeon Form Controls
View the full collection →

Search CodeFronts

Loading…

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