CSS 네온 및 발광 텍스트 생성기

이 도구는 CSS text-shadow로 네온사인처럼 빛나는 글자를 만듭니다. 왼쪽에서 표시할 텍스트를 입력하고 글꼴 크기(20~100px), 네온 반경(2~30px), 네온 색상, 글꼴 스타일(Monospace, Sans-serif, Serif, Cursive)을 조절하면 오른쪽 미리보기에 바로 반영되고, 아래에 복사할 수 있는 CSS가 생성됩니다. 기본 핑크 설정은 .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } 에 깜빡임 애니메이션이 더해진 코드입니다.

원리는 세 겹의 text-shadow입니다. 첫 번째는 4px 흰색 빛으로 네온관의 가장 밝은 중심을 표현하고, 두 번째는 선택한 색상에 '네온 반경'을 흐림 값으로 사용하며, 세 번째는 같은 색에 흐림 값을 두 배로 늘려 바깥으로 퍼지는 빛을 만듭니다. 글자 색은 흰색으로 고정되는데, 실제 네온관도 중심은 거의 흰색으로 보이고 색은 주변의 빛에서 느껴지기 때문입니다. 반경이 클수록 빛이 부드럽고 넓게 퍼지지만 작은 글자에서는 번져 보이므로 글자가 작을수록 반경도 줄이는 것이 좋습니다.

'숨쉬기 애니메이션 활성화'를 켜면 CSS에 @keyframes neon-pulse가 추가됩니다. 애니메이션 중간에 빛의 크기를 절반으로, 불투명도를 0.85로 낮추고 alternate와 ease-in-out으로 왕복 재생해 네온이 숨 쉬듯 보입니다. 깜빡임 속도는 0.5~4초이며 숫자가 작을수록 빠르게 깜빡입니다. 사이버펑크(핑크), 오로라(그린), 심해(블루, 깜빡임 없음), 석양(오렌지) 네 가지 프리셋은 색상·반경·크기·애니메이션을 한 번에 적용합니다.

네온 글자는 검정이나 남색 같은 어두운 배경에서 가장 잘 보이며, 흰 배경에서는 빛이 거의 보이지 않습니다. 너무 빠른 깜빡임은 일부 사용자에게 불편을 줄 수 있으니 속도를 느리게 하고 prefers-reduced-motion 미디어 쿼리로 애니메이션을 끌 수 있게 하는 것을 권장합니다. text-shadow는 순수 CSS라 이미지나 JavaScript가 필요 없고 모든 최신 브라우저에서 동작합니다. 복사되는 클래스 이름은 .neon-text이므로 필요에 맞게 바꿔 제목이나 버튼에 적용하세요.