Banner 标题压图
运营给双十一大促Banner配了张高饱和底图，白色标题字放上去完全被淹没。设计师试了纯黑投影太脏、加白色描边又太笨。用本工具给标题字叠加三层阴影：第一层深红偏移2px模拟立体，第二层黑色偏移4px做轮廓，第三层白色半透明偏移6px制造光晕。三秒调完参数，标题在任何颜色底图上都清晰可辨，不用重做底图。
图 层Shadow Layers · 拖动重排 · 点标题展开
文 字Type · 舞台内可直接编辑
字色 color
字号 size
92px
字重 weight
字体 family
预 设Gallery · 霓虹 / 3D / 描边 / 火焰…
全宝 Aa
text-shadow 点击文字可编辑就绪 · 多层文字阴影实时合成 · 全程浏览器本地处理
第一节
关于本工具
About设计师在 Figma 里调了十几层阴影参数，导出到网页却发现效果全变——因为浏览器渲染阴影的方式和设计软件不同。这个工具直接在浏览器里模拟 CSS `text-shadow` 的叠加规则，支持逐层调整偏移、模糊和颜色，并实时生成对应的 CSS 代码。所有计算在本地完成，不会把字体或参数上传到服务器。
使用场景
直播间贴片字幕
带货主播在绿幕前讲解，实时叠加的商品卖点字幕经常被背景的闪光特效吞掉。用本工具给字幕文字加两层阴影：一层纯黑无偏移做实底，一层同色系渐变阴影做外发光。调完后字幕在绿幕和闪光交替的复杂画面里始终稳定可读，观众不用暂停也能看清价格和库存数字。
PPT 封面字效
产品经理要做一个「年度复盘」PPT封面，公司模板只允许用黑体字和纯白背景。用本工具在标题字上叠三层阴影：第一层深蓝偏移1px模拟凹陷，第二层浅蓝偏移3px模拟凸起，第三层白色偏移5px做高光。最终效果像金属蚀刻字，完全不用额外素材或PS，在模板限制内做出了质感。
视频封面标题
B站UP主做了一期「暗黑地牢」游戏攻略，视频封面是游戏内昏暗场景截图。白色标题字放上去完全看不清。用本工具给文字加四层阴影：第一层黑色偏移1px紧贴字边，第二层红色偏移2px模拟血迹，第三层深灰偏移4px做轮廓，第四层黑色偏移6px做投影。调完后标题在暗色背景上既有辨识度又符合游戏风格。
UI 按钮悬浮态
前端开发在写一个深色模式下的操作按钮，默认状态是纯色填充，悬浮态需要文字有立体感但不改变按钮底色。用本工具给按钮文字加两层阴影：一层白色偏移1px模拟顶部受光，一层黑色偏移2px模拟底部投影。两层阴影配合让文字在深色按钮上产生悬浮效果，用户鼠标移过时视觉反馈明确，无需额外切图。
第二节
使用指南
Getting Started使用步骤
- 1在「文字内容」框输入要添加阴影的文本，预览区即时显示默认单层阴影效果
- 2点击「添加阴影层」按钮，下方新增一组偏移量、模糊半径与颜色选择器
- 3拖动各层的 X/Y 偏移滑块（-50px 到 50px），预览区每层阴影位置同步移动
- 4调整「模糊半径」滑块（0px 到 20px）控制阴影边缘柔化程度，数值越大越模糊
- 5点击颜色选择器为每层阴影单独选色，支持十六进制、RGB 或取色器直接拾取
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| text-shadow: 2px 2px 0 #000; | text-shadow: 2px 2px 0 #000; → 生成单层黑色阴影，向右下偏移2px，无模糊。 | 常规：最基础的单层阴影，验证工具对标准CSS语法的解析与输出一致性。 |
| text-shadow: 1px 1px 2px rgba(255,0,0,0.5), -1px -1px 2px blue; | text-shadow: 1px 1px 2px rgba(255,0,0,0.5), -1px -1px 2px blue; → 生成两层阴影：红色半透明向右下，蓝色向左上，各带2px模糊。 | 常规：两层阴影，含rgba颜色与命名颜色混合，验证多层叠加与透明度处理。 |
| text-shadow: 0 0 0 transparent; | text-shadow: 0 0 0 transparent; → 生成完全透明、无偏移、无模糊的阴影，视觉上无效果。 | 边界：零偏移、零模糊、透明色，验证工具是否保留这种『空阴影』声明。 |
| text-shadow: 9999px 9999px 9999px #fff; | text-shadow: 9999px 9999px 9999px #fff; → 生成极大偏移与模糊的白色阴影，实际渲染可能超出视口。 | 边界：超大数值，验证工具对极端值的容忍度，以及输出是否截断或报错。 |
| text-shadow: 2px 2px 0 #000, 4px 4px 0 #000, 6px 6px 0 #000; | text-shadow: 2px 2px 0 #000, 4px 4px 0 #000, 6px 6px 0 #000; → 三层黑色无模糊阴影，逐层向右下偏移，形成阶梯效果。 | 常规：多层同色阴影实现『伪3D』效果，验证工具对重复声明的处理。 |
| text-shadow: 2px 2px; | text-shadow: 2px 2px; → 缺少颜色和模糊值，浏览器默认使用color值并模糊为0，工具输出原样。 | 易错：不完整声明（缺少颜色/模糊），验证工具是否自动补全或保留原样。 |
| text-shadow: 2px 2px 0 #000, 2px 2px 0 #f00; | text-shadow: 2px 2px 0 #000, 2px 2px 0 #f00; → 两层阴影完全重叠（相同偏移与模糊），红色覆盖黑色。 | 易错：完全相同偏移的多层阴影，视觉上只有最后一层可见，验证工具是否如实输出而非合并。 |
常见错误对照
1.阴影偏移量用空格分隔，导致只生效第一个值
✗ 错误
2px 4px 6px black✓ 修复
2px 4px 6px blackCSS text-shadow 语法要求每个阴影用逗号分隔，空格仅用于同一阴影内各参数的分隔。写多个阴影时漏掉逗号，浏览器只会解析第一个阴影，后续参数被忽略。
2.颜色值写在偏移量前面，顺序颠倒
✗ 错误
red 2px 4px 6px✓ 修复
2px 4px 6px redtext-shadow 的标准顺序是：水平偏移 垂直偏移 模糊半径 颜色。颜色可以放在最后或最前（CSS 允许），但混合多个阴影时统一顺序能避免解析歧义。
3.模糊半径写为负数，阴影消失
✗ 错误
2px 4px -3px black✓ 修复
2px 4px 3px black模糊半径（blur-radius）必须为非负值。负值在 CSS 规范中属于无效值，浏览器会忽略整条阴影声明。
4.多层阴影之间用空格代替逗号
✗ 错误
2px 2px black 4px 4px gray✓ 修复
2px 2px black, 4px 4px graytext-shadow 支持逗号分隔的多层阴影。用空格分隔会被解析为单个阴影的多个参数，导致参数数量错误，整条声明无效。
5.颜色值使用缩写十六进制但位数不对
✗ 错误
#f00✓ 修复
#ff0000虽然 #f00 是合法的 CSS 颜色缩写，但部分旧版浏览器或非标准解析器可能不支持。使用完整六位十六进制能保证最大兼容性。
6.阴影数量超过 6 层导致页面卡顿
✗ 错误
0 0 1px red, 0 0 2px orange, ...（共 15 层）✓ 修复
0 0 1px red, 0 0 2px orange, 0 0 3px yellow（共 6 层）每层阴影都会触发浏览器的像素级重绘，过多阴影（通常 > 6 层）会显著降低渲染性能，尤其在移动端或低端设备上。
7.模糊半径和偏移量单位混用（px / em / rem）
✗ 错误
2em 4px 6px black✓ 修复
2px 4px 6px blacktext-shadow 各参数支持不同长度单位，但混用会导致视觉效果不可预测。建议全用 px 以保持精确控制，避免 em/rem 受父元素字体影响。
8.忘记为透明文字设置颜色，阴影不可见
✗ 错误
color: transparent; text-shadow: 2px 2px black✓ 修复
color: transparent; text-shadow: 2px 2px black; -webkit-text-fill-color: transparent仅设置 color: transparent 时，部分浏览器会连阴影一起透明化。需同时设置 -webkit-text-fill-color 来保留阴影可见性。
第三节
工作原理
How It Works核心公式
阴影偏移量 = (h-shadow, v-shadow) 逐层叠加，每层颜色独立指定
变量说明
h-shadow水平偏移，正右负左，单位 pxv-shadow垂直偏移，正下负上，单位 pxblur-radius模糊半径，值越大边缘越柔和color阴影颜色，支持 hex/rgba 格式
示例
为文字添加两层阴影：第一层偏移 (2px, 2px)、模糊 1px、颜色 #333；第二层偏移 (4px, 4px)、模糊 2px、颜色 rgba(0,0,0,0.5)。CSS 表示为 text-shadow: 2px 2px 1px #333, 4px 4px 2px rgba(0,0,0,0.5); 渲染时浏览器按顺序从后往前叠加，最终呈现立体多层效果。
用户输入
本地处理
输出结果
代码生成
第五节
常见问题
Q & A问怎么给文字加好几层不同颜色的阴影？＋
答
本工具的「阴影层数」滑块可以设置 1 到 10 层。每层独立控制颜色、水平偏移、垂直偏移和模糊半径。操作顺序：先滑到想要的层数（比如 3 层），然后逐层点击色块选颜色、拖动滑块调偏移和模糊。所有层的效果会实时叠加在预览区，调好一层再调下一层，不用切页面。
问为什么我调了模糊半径阴影反而看不见了？＋
答
模糊半径（Blur）值太大时，阴影会被扩散到几乎透明，视觉上像消失了一样。比如字体 48px、Blur 设到 40px 以上，阴影边缘会淡到看不清。建议 Blur 值控制在文字大小的 10%-50% 之间（比如 48px 字用 5-24px 模糊），同时配合调大阴影的偏移量（X/Y），让阴影主体露在文字后面。
问阴影颜色能带透明度吗？比如半透明红色阴影？＋
答
可以。点击色块弹出取色器后，除了选颜色，底部还有一个「透明度」滑块（Alpha 通道），从 0（全透明）到 100（不透明）。比如想做一个半透明红色投影，选红色后将 Alpha 拉到 50 左右，阴影就会透出背景色，叠加多层时效果更自然。
问最多能加几层阴影？多了会不会卡？＋
答
最多 10 层。本工具纯浏览器端渲染（FE），不依赖服务器，性能取决于设备。10 层阴影加高模糊在老旧手机或低配电脑上可能有轻微卡顿，但一般现代设备（近 5 年手机/笔记本）都能流畅实时预览。如果卡，建议减少层数或降低模糊半径。
问生成的阴影代码怎么复制到 CSS 里用？＋
答
预览区下方有「复制 CSS」按钮，点击会自动复制完整的 text-shadow 属性值，比如 `text-shadow: 2px 2px 4px rgba(0,0,0,0.5), -1px -1px 2px #ff0000;`。直接粘贴到 CSS 文件的对应选择器里就行。注意多层阴影用逗号分隔，顺序从第一层到最后一层。
问能不能给阴影加渐变色？比如阴影从上到下变颜色？＋
答
不能。CSS 的 text-shadow 属性本身不支持渐变色阴影，每层阴影只能是单一颜色。本工具严格遵循 CSS 标准，所以阴影颜色只能是纯色（可带透明度）。如果非要渐变阴影效果，可以尝试用多层层叠不同颜色的阴影（比如上层暗红、下层亮红），模拟出渐变感。
问为什么预览里阴影和文字重叠的地方看起来怪怪的？＋
答
CSS text-shadow 的阴影始终在文字图层的下方（z 轴顺序固定），不会盖在文字上面。如果阴影偏移很小（比如 X/Y 都是 0 或 1px），阴影会几乎完全被文字挡住，只有边缘渗出一点颜色。想要阴影明显可见，建议增大偏移量（至少 3-5px），或让阴影颜色比文字深。
问手机浏览器上能用吗？触屏操作方便吗？＋
答
完全可用。所有滑块和色块都支持触控操作，滑块用手指拖动即可，色块点击弹出取色器。预览区域在手机屏幕小的时候会自动缩放适应，保证能看到完整文字和阴影效果。建议横屏使用，滑块调节更精准。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。