12 CSS Neon Designs07 / 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. A whole-word "OPEN BAR" fault using precise @keyframes percentage gaps (95% lit, 1–2 frames dark, repeat at irregular intervals so the rhythm never feels mechanical), a per-letter staggered system on "NIGHTLIF" where each character runs its own timing — including two "dead bulb" letters that only occasionally sputter to life — and a missing E gap exposing the broken-tube reality, and a vintage amber "Grand Hotel" script in Yellowtail with a slow mechanical hum (skewX drift) layered over fault cuts. Pink/cyan/amber ambient floor light pools bleed up from below to sell the dirty-wall context. Boogaloo + Yellowtail + Permanent Marker. Best for vintage bar/restaurant sites, dive-bar branding, retrowave horror, neo-noir film promo.
Published
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><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;
}
}/* ─── 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;
}
}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 Flickering Sign
Source: https://codefronts.com/design-styles/css-neon/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. A whole-word "OPEN BAR" fault using precise @keyframes percentage gaps (95% lit, 1–2 frames dark, repeat at irregular intervals so the rhythm never feels mechanical), a per-letter staggered system on "NIGHTLIF" where each character runs its own timing — including two "dead bulb" letters that only occasionally sputter to life — and a missing E gap exposing the broken-tube reality, and a vintage amber "Grand Hotel" script in Yellowtail with a slow mechanical hum (skewX drift) layered over fault cuts. Pink/cyan/amber ambient floor light pools bleed up from below to sell the dirty-wall context. Boogaloo + Yellowtail + Permanent Marker. Best for vintage bar/restaurant sites, dive-bar branding, retrowave horror, neo-noir film promo.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
}
}
```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 Flickering Sign
Source: https://codefronts.com/design-styles/css-neon/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. A whole-word "OPEN BAR" fault using precise @keyframes percentage gaps (95% lit, 1–2 frames dark, repeat at irregular intervals so the rhythm never feels mechanical), a per-letter staggered system on "NIGHTLIF" where each character runs its own timing — including two "dead bulb" letters that only occasionally sputter to life — and a missing E gap exposing the broken-tube reality, and a vintage amber "Grand Hotel" script in Yellowtail with a slow mechanical hum (skewX drift) layered over fault cuts. Pink/cyan/amber ambient floor light pools bleed up from below to sell the dirty-wall context. Boogaloo + Yellowtail + Permanent Marker. Best for vintage bar/restaurant sites, dive-bar branding, retrowave horror, neo-noir film promo.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
}
}
```