CSS文字阴影生成器

什么是CSS文字阴影生成器？

如何使用CSS文字阴影生成器

1. 1

   输入测试文字：找到顶部的预览输入区域，输入你想要添加阴影效果的自定义测试文字，替换默认的示例文字，方便你实时查看对应文字的阴影效果

2. 2

   调整阴影参数：拖动X偏移、Y偏移和模糊半径对应的滑块，实时观察预览效果，再点击『颜色选择器』挑选合适的阴影颜色

3. 3

   添加多层阴影：点击『新增阴影』按钮，就可以为当前文字新增额外的阴影层，你可以单独调整每一层阴影的参数叠加出特殊效果

4. 4

   复制可用代码：调整完成后，找到下方生成好的CSS代码框，选中全部代码复制，之后就可以粘贴到你的项目中直接使用

什么场景会用到？

计算示例

注意事项

• 支持添加任意数量的多层阴影，每层参数独立调整，最终输出会按添加顺序拼接符合CSS规范的阴影值。
• 偏移量支持输入负数，负数代表向X轴左侧、Y轴上方偏移，可实现不同方向的投影效果。
• 半透明阴影请使用带透明度通道的十六进制颜色，如#rrggbbaa格式，工具可正确识别并输出到代码中。
• 部分非常旧的浏览器不支持带alpha通道的十六进制颜色，如需兼容可改用rgba()格式手动调整。

常见问题

参考资料

• MDN Web Docs 的 CSS text-shadow 文档
• W3C CSS Color Module Level 4 规范

本页工具遵循CSS标准的text-shadow语法规则，支持所有符合规范的参数写法，示例代码已验证可正常运行，由工具集编辑组维护更新。