네온 글로우

Neon glow

흐림 반경이 다른 그림자를 여러 겹 쌓아 네온사인처럼 빛나 보이게 하는 기법.

다른 이름: 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}}

text-shadow 를 색은 같고 blur 반경만 점점 크게 여러 겹 쌓으면 중심은 선명하고 바깥은 번져 보이는 발광 효과가 납니다. box-shadow 도 같은 원리로 테두리에 적용할 수 있습니다.

어두운 배경 위에서만 제대로 보입니다 — 밝은 배경에서는 발광이 아니라 그냥 흐린 얼룩이 됩니다. 불규칙한 깜빡임(flicker) 애니메이션을 더하면 실제 네온관의 불안정한 느낌이 살아납니다.

언제 쓰나

브랜드 포인트, 이벤트 페이지, 다크모드 전용 강조 요소에 씁니다. 본문 텍스트에는 가독성이 떨어지니 쓰지 않습니다.