文字阴影生成器

文字阴影是给标题增添纵深、发光效果或可读性的最廉价手段之一，无需图片或滤镜。这个生成器让你逐层构建阴影，对照明暗两种实时预览调整偏移、模糊、颜色和不透明度，然后复制一段干净的 text-shadow 声明。五个预设覆盖了大多数人常用的效果，每一层都可以重新排序，让你精确控制什么绘制在最上层。

使用方法

1. 选择一个起点。 用柔和、硬描边、霓虹发光、复古 3D 或浮雕载入一套调好的图层，或保留默认的单个柔和阴影。
2. 选中图层。 点击图层列表中的任意一行；选中行会描边，其数值载入编辑器。
3. 调整它。 移动水平偏移、垂直偏移和模糊滑块（或直接输入精确数值），再设置颜色和不透明度。
4. 堆叠并重新排序。 添加图层以获得更多纵深，然后用箭头把图层上移或下移。顺序就是绘制顺序。
5. 检查两种主题。 在明暗两种预览背景之间切换，并把字号滑块从 24px 拖到 96px。
6. 复制。 输出是一段可直接粘贴的 text-shadow: ...; 声明。

绘制顺序规则

关于 text-shadow，最需要理解的一点是：越靠前的图层压在上层。在霓虹发光预设里，第 1 层是 0px 0px 4px——一个紧凑明亮的核心——第 4 层是 0px 0px 56px，一个宽阔微弱的光晕。如果你把顺序颠倒，宽光晕就会盖在核心上，把它冲淡。同样的逻辑驱动复古 3D 预设：那里逐级更暗的副本每次再向右下各挪一个像素；最亮的副本列在最前，因此始终可见地压在最上层。

偏移是从文字原始位置量起的：正的 x 把阴影向右移，正的 y 把它向下移。零偏移配正模糊会产生一个以字形为中心的发光，而带一点正 y 和适度模糊则给出经典的凸起字母效果。模糊控制颜色向外渗出的距离；为零时阴影是与字形尺寸完全相同的硬边副本。不透明度与颜色自身的 alpha 分开追踪，因为取色器输出的是不透明十六进制，生成器会替你转换成 rgba()。如果你手工修改结果，请保留单位：text-shadow: 0 2px 4px #000 是合法的，而 text-shadow: 0 2 4 black 不是。

五个预设详解

预设	层数	产生的效果
柔和	1	25% 黑色的 0px 2px 4px——用于正文或标题的柔和投影
硬描边	4	零模糊的黑色副本，位于 -1/0、+1/0、0/-1、0/+1 px——可读的轮廓
霓虹发光	4	同一青色在 4、12、28、56 px 模糊下，不透明度从 90% 递减到 60%
复古 3D	5	深红色副本朝右下每次挪 1–5 px，零模糊
浮雕	2	上方 0 -1px 的白色，加下方 0 1px 1px 一条淡淡的深色线

从最接近的预设开始调整，而不是从空栈搭建。要做柔和的 UI 阴影，25% 的柔和预设已经很接近；把 y 偏移提高到 4–6px、模糊提高到 8–12px 会更有悬浮感。要一个在照片上仍可读的轮廓，用硬描边，并把颜色设成背景的深色调而不是纯黑。要做发光，保持偏移为零，只变化模糊和不透明度，并让颜色保持饱和——低饱和的发光颜色看起来像雾。复古 3D 是最值得把颜色换成品牌配色的预设，因为它的五层应当以均匀增量从亮到暗。

实操示例：解读输出

载入霓虹发光会得到这段确切的声明：

text-shadow: 0px 0px 4px rgba(15, 240, 252, 0.9), 0px 0px 12px rgba(15, 240, 252, 0.8), 0px 0px 28px rgba(15, 240, 252, 0.7), 0px 0px 56px rgba(15, 240, 252, 0.6);

改为载入硬描边，零模糊的图层会省略模糊分量，得到 -1px 0px #000000, 1px 0px #000000, 0px -1px #000000, 0px 1px #000000。默认图层是 0px 2px 4px rgba(0, 0, 0, 0.3)，把它的不透明度提高到 100% 会把颜色切换成普通的 #000000。

边界情况与局限

• 多层阴影开销大。 每一层都是对每个字形的额外绘制，所以长段落上的五层阴影，代价明显高于短标题上的一套。厚重的图层栈请留给展示性文字。
• 模糊上限为 100px，偏移上限为 ±50px。 超出范围的输入会被钳制，而不是拒绝。
• 颜色输入只限十六进制。 取色器输出 #rrggbb；逻辑会规范化三位或六位十六进制，遇到非法值则回退到 #000000。
• 没有扩展，也没有 inset。 如果你要给元素的盒子而不是字母加阴影，那是另一个属性和另一个工具。
• 对比度仍然重要。 阴影可能让文字更难读；请在真实背景上验证结果，而不只是在预览色块上。
• 大模糊会抹花小字。 小号浅色文字后面的大范围深色阴影会降低对比度而不是改善它，所以请用你实际要发布的最小字号测试。
• 预览只显示一行文字。 会换行的长字符串可能暴露出单行示例掩盖的层叠或重叠问题，请在自己的标记里做合理性检查。

相关工具

• CSS 盒阴影生成器 —— 带实时预览设计多层盒阴影。
• CSS Flexbox 生成器 —— 可视化设计 flexbox 布局并复制 CSS。
• CSS 渐变生成器 —— 为你的布局构建自定义 CSS 渐变。