CSS 霓虹灯文字效果

功能

• 多层 text-shadow 叠加出光晕，层数与半径跟着强度走
• 灯管色与字色分开调 —— 字色用略带主色的白比纯白更像灯管芯
• 强度 0–100 一个参数控制层数、半径与透明度
• 打字即可预览（工具提供文字输入框）
• 预览区配深色底，霓虹的对比感立即成立
• 下方给出可复制的 CSS 规则，带 `.neon` 选择器
• 代码带语法着色，复制按钮一步拿走
• 全部在浏览器本地计算

使用方法

1. 在上面的输入框里打几个字
2. 选灯管颜色，拖强度看光晕扩散的变化
3. 需要更「亮」就把字色调到接近白，需要更「艳」就跟灯管色拉开对比
4. 满意后复制 CSS

常见问题

为什么一条 text-shadow 出不来霓虹感？

因为霓虹灯管的观感来自亮度梯度：中心最亮、向外迅速衰减。单条阴影只有一个半径与一个透明度，要么太实（像描边）要么太虚（像糊了）。多层叠加模拟的正是那条衰减曲线：贴身一层不透明、中间层中等透明、外层很低透明 —— 眼睛读到的是「这里有个发光的管子」，而不是「这行字描了边」。

为什么这个效果必须配深色底？

因为对比度。霓虹灯的视觉前提是亮光源在暗环境里，浅色底上光晕会与背景混在一起，字反而变脏、变糊。要放在浅色界面上只能大幅削弱光晕（那就不像霓虹了）。所以工具把预览区的底设成深色 —— 那不是装饰，是这个效果成立的条件之一。

发光文字对可访问性有影响吗？

有，两点要注意。一是对比度：光晕会模糊字的边缘，正文级别的阅读会吃力，所以它适合标题、Logo、装饰性文字，不适合正文；二是有视觉障碍或偏头痛的用户对强发光敏感，而系统里有一个「减少动态效果」的偏好（`prefers-reduced-motion`），它管不到静态发光，但你可以主动提供一个「弱化效果」的开关或在高对比模式下关掉光晕。