Neon glow

네온 글로우

Stacking several shadows with different blur radii so text or shapes glow like a neon sign.

Also known as: Text glowNeon sign

···

html

<div class="sign"><h1 class="neon">OPEN</h1></div>

css

.sign{background:radial-gradient(ellipse at 50% 60%,rgba(255,45,209,.16),transparent 65%)}
h1.neon{margin:0;font-size:clamp(40px,10vmin,64px);font-weight:800;color:#fff;letter-spacing:.06em;
  text-shadow:0 0 6px #fff,0 0 16px #ff2dd1,0 0 32px #ff2dd1,0 0 60px #ff2dd1,0 0 4px #fff;
  animation:flicker 3.6s infinite}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.4}}

Layer text-shadow with the same colour but growing blur radii, and the centre stays crisp while the edges bloom outward — a glow. box-shadow works the same way for outlines.

It only reads correctly on a dark background — on a light one it's just a blurry smudge, not a glow. Adding an irregular flicker animation sells the unstable feel of a real neon tube.

When to use

Use for brand accents, event pages, dark-mode-only emphasis. Avoid it in body text — legibility suffers.