💬 文字阴影生成器
多阴影叠加 · 实时预览 · 霓虹灯效果
123问 工具站
多阴影叠加 · 实时预览 · 霓虹灯效果
text-shadow用于文字，不支持spread（扩散）参数，不支持inset内阴影。box-shadow用于元素容器，支持spread和inset。两者控制参数格式不同。
多个text-shadow用逗号分隔，如text-shadow: 1px 1px 0 #000, 2px 2px 0 #333。本工具支持添加/删除阴影层来创建多层立体效果。
多阴影叠加不同颜色：text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080; 用多层模糊和颜色叠加实现发光。
有。写在前面的阴影先绘制、在更上层，后面的阴影在被压在下面。想让某个发光层更突出就把它写在前面。顺序影响叠加效果，尤其做霓虹和立体字时要反复调整。
完全可以，而且强烈推荐。用rgba(0,0,0,0.3)代替纯黑，阴影会显得通透自然，不会一片死灰。做发光效果时用半透明彩色还能形成柔和光晕。
比box-shadow轻，但大模糊半径或大量阴影层在移动端滚动时仍可能卡顿。建议同一屏内用到的阴影别太多，动画时避免每帧重算阴影，改用opacity或transform过渡。
用多层阴影向同一方向逐层偏移堆叠，如text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa; 层数越多纵深越明显，越靠后的层颜色越深，形成立体厚度。
IE10及以上支持基本text-shadow，但IE只取第一层阴影，多层效果会失效。如今IE已停服，现代浏览器全部支持且支持多层，可以放心使用。
text-shadow 和 box-shadow 虽然都是 CSS 阴影属性，但参数和支持不同：
| 特性 | text-shadow | box-shadow |
|---|---|---|
| 参数格式 | offset-x offset-y blur color | offset-x offset-y blur spread color |
| 扩散参数(spread) | 不支持 | 支持，控制阴影扩大或缩小 |
| 内阴影(inset) | 不支持 | 支持，用 inset 关键字 |
| 多阴影 | 支持，逗号分隔 | 支持，逗号分隔 |
| 性能 | GPU 加速较好 | 大面积阴影可能影响性能 |
| 作用对象 | 文字轮廓 | 元素盒子（含 border-radius 的圆角） |
关键差异：text-shadow 没有 spread（扩散/收缩）参数，也没有 inset。如果需要文字内阴影，只能通过 SVG filter 实现。
阴影虽然视觉效果出众，但可能影响页面渲染性能，尤其是在低性能设备上：
| 写法 | 开销 | 建议 |
|---|---|---|
| 多层阴影 | 每层独立绘制 | 控制在 3 层以内 |
| 大模糊半径 | GPU 计算量大 | blur ≤ 10px |
| 动画改阴影 | 每帧重绘 | 用 opacity 动画替代 |
| will-change | 预占 GPU 资源 | 不要滥用 |
好的文字阴影遵循以下设计原则：
| 光源位置 | 阴影偏移 | 效果 |
|---|---|---|
| 左上 | X正 Y正（右下） | 投影到右下，最常见 |
| 右上 | X负 Y正（左下） | 投影到左下 |
| 正上方 | Y正 | 投影到正下方 |
| 底部光 | Y负 | 投影到上方 |
以下是设计师常用的文字阴影配方，可直接复制使用：
| 效果 | CSS 代码 | 适用场景 |
|---|---|---|
| 轻柔投影 | 1px 2px 3px rgba(0,0,0,0.15) | 正文、卡片标题 |
| 硬朗投影 | 3px 3px 0 rgba(0,0,0,0.2) | 粗体标题、Banner |
| 长投影 | 5px 5px 0 #ddd, 10px 10px 0 #eee | 扁平化设计、特色标题 |
| 辉光 | 0 0 10px #0ff, 0 0 20px #0ff | 赛博朋克、科技风 |
| 凹刻 | 0 -1px 0 rgba(255,255,255,0.3) | 深色底上的凹陷文字 |
| 双重曝光 | -2px -2px 0 #ff0080, 2px 2px 0 #00ffff | 潮流设计、Poster |
| 浏览器 | 支持版本 | 备注 |
|---|---|---|
| Chrome | 4.0+ | 完全支持 |
| Firefox | 3.5+ | 完全支持 |
| Safari | 4.0+ | 完全支持 |
| Edge | 12+（所有版本） | 完全支持 |
| IE | 10+ | 不支持多层阴影（只取第一层） |
| iOS Safari | 3.2+ | 完全支持，性能佳 |
| Android Browser | 2.1+ | 完全支持 |
1. 调整X/Y偏移和模糊。
2. 选择阴影颜色。
3. 添加/删除阴影层实现多层效果。
4. 查看预览和生成CSS。