20 CSS Gradient Text Designs 06 / 20

CSS Neon Pulse Gradient Text Glow

A scrolling cyan-magenta-lime gradient combined with a pulsing drop-shadow glow recreates the flickering neon sign aesthetic entirely in CSS.

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

The code

<div class="gt-06">
  <span class="gt-06__label">Neon pulse gradient</span>
  <h1 class="gt-06__neon">NEON</h1>
  <div class="gt-06__bar">
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
  </div>
  <p class="gt-06__tagline">Glowing gradient pulse</p>
</div>
.gt-06, .gt-06 *, .gt-06 *::before, .gt-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-06 {
  --bg: #030a10;
  --n1: #00f5ff;
  --n2: #ff00e4;
  --n3: #b8ff00;
  font-family: 'Exo 2', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}
.gt-06::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, #00f5ff0a, transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, #ff00e40a, transparent);
  pointer-events: none;
}
.gt-06__label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #00f5ff30;
}
.gt-06__neon {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, var(--n1), var(--n2), var(--n3), var(--n1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px #00f5ff80) drop-shadow(0 0 40px #ff00e440);
  animation: gt-06-neonflow 4s linear infinite, gt-06-pulse 2s ease-in-out infinite;
  letter-spacing: .08em;
}
.gt-06__bar {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.gt-06__seg {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--n1), var(--n2));
  animation: gt-06-barpulse 1.5s ease-in-out infinite;
}
.gt-06__seg:nth-child(1) { width: 40px; animation-delay: 0s; }
.gt-06__seg:nth-child(2) { width: 80px; animation-delay: -.3s; }
.gt-06__seg:nth-child(3) { width: 120px; animation-delay: -.6s; background: linear-gradient(90deg, var(--n2), var(--n3)); }
.gt-06__seg:nth-child(4) { width: 80px; animation-delay: -.9s; }
.gt-06__seg:nth-child(5) { width: 40px; animation-delay: -1.2s; }
.gt-06__tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.9rem, 2.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--n2), var(--n3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-06-fade 2s ease-in-out infinite alternate;
}
@keyframes gt-06-neonflow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes gt-06-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px #00f5ff80) drop-shadow(0 0 40px #ff00e440); }
  50%       { filter: drop-shadow(0 0 35px #00f5ffcc) drop-shadow(0 0 70px #ff00e460); }
}
@keyframes gt-06-barpulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}
@keyframes gt-06-fade {
  0%   { opacity: .6; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-06__neon, .gt-06__seg, .gt-06__tagline { animation: none; filter: none; }
}

How this works

Two simultaneous animations run on .gt-06__neon: gt-06-neonflow scrolls the gradient horizontally via background-position, and gt-06-pulse oscillates the filter: drop-shadow radius between a tight glow and a wide bloom. Layering two drop-shadow() calls — one tight and bright, one wide and diffuse — produces the multi-ring halo seen around real neon tubing.

The bar segments below use a separate gt-06-barpulse keyframe that animates opacity with staggered delays, simulating the audio-level meter look. Only opacity and background-position animate, keeping segment animation on the compositor.

Customize

  • Increase the inner glow radius from 20px to 40px for a softer, more diffuse neon tube look.
  • Change glow colour by editing the #00f5ff (cyan) and #ff00e4 (magenta) values in the drop-shadow calls — use matching hues to the gradient stops for coherence.
  • Add a third animation with animation-name: gt-06-neonflow, gt-06-pulse, gt-06-flicker where gt-06-flicker briefly sets opacity: 0.6 to mimic a real neon tube fault.

Watch out for

  • filter: drop-shadow composites on the GPU but is re-rasterised if the element's paint changes — avoid changing the gradient simultaneously with the glow to prevent double repaint.
  • Stacking two drop-shadow() functions doubles the GPU blur passes; on integrated graphics this can cause frame drops at large text sizes above 200px.
  • The filter property creates a new stacking context, which may clip elements that use overflow: visible — move the glow to a sibling pseudo-element if overflow is needed.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 49+ 57+

drop-shadow() filter is well-supported; stacking multiple drop-shadow values may have minor rendering differences in Firefox versus Chrome.

More from 20 CSS Gradient Text Designs

CSS Click Ripple Gradient Text InteractionCSS Cursor-Tracked Radial Gradient TextCSS Typewriter Loop Gradient Text AnimationCSS Animated Gradient Text FlowCSS Aurora Borealis Gradient Text SweepCSS Conic Gradient Text Hue SpinCSS Rainbow Wave Per-Letter Gradient TextCSS Lava Lamp Radial Gradient TextCSS Gradient Text Outline Stroke EffectCSS Metallic Chrome Gold Copper Gradient TextCSS Holographic Foil Iridescent Gradient TextCSS Duotone Gradient Text Two-Colour Fill
View the full collection →

Search CodeFronts

Loading…

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