使用方法
- 在“示例文字”中输入文字。预览会以该阴影显示它，因此您可以用自己的文字判断效果。
- 设置第一层的“水平偏移（px）”“垂直偏移（px）”和“模糊（px）”。垂直偏移为正数时，阴影向下移动。
- 为每一层选择“阴影颜色”和“不透明度”，并用“添加一层”加入更多层，即可得到更柔和的光晕。
- 复制“CSS”中的声明，并将它粘贴到文字的样式规则中。
属性值如何组成
text-shadow 属性可接受一个阴影，或以逗号分隔的阴影列表。每个阴影都有水平和垂直偏移，以及可以省略的模糊半径，还有颜色（颜色可以写在长度之前或之后）。CSS 文本装饰规范（英文）给出了语法。第一个阴影绘制在其他阴影之上；没有阴影时，值为 none。
文字阴影没有扩展半径（spread），这与盒阴影不同。模糊半径永远不为负，模糊越大，阴影分布的区域越宽。不透明度以 rgba 颜色的 alpha 值写出，最多两位小数。长度为零时不需要单位，因此本工具写作0。
text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...层与编辑器的检查
柔和的光晕通常使用两到三层：一层较小、较暗、贴近字形的阴影，以及一层较大、较浅、离字形较远的阴影。编辑器最多允许8层，偏移为 -200至200像素，模糊为0至100像素，不透明度为0至100%。
预览中的颜色（文字颜色和背景颜色）仅用于预览。它们不属于 CSS 的一部分，因此声明中只有阴影。
计算示例：蓝色光晕下的黑色阴影
第一层的偏移为0和2像素，模糊为4像素，颜色为黑色，不透明度为30%。第二层没有偏移，模糊为12像素，颜色为蓝色 #3b82f6，不透明度为50%。
值为0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5)，完整声明为 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);
常见问题
模糊与第二层有什么区别？
模糊让一个阴影的边缘变柔和，因此它会在更宽的区域内逐渐消失。第二层则是另一个阴影，有自己的偏移、颜色和不透明度，可以画在与第一层不同的位置。
偏移为什么有正负号？
水平偏移为正时阴影向右，为负时向左。垂直偏移为正时阴影向下，因此落在文字下方的阴影，其值为正。
文字阴影可以有扩展半径吗？
不可以。text-shadow 属性只接受偏移、模糊和颜色。盒阴影有扩展半径，但文字没有，因此编辑器不提供此项。
为什么预览与我的页面看起来不同？
预览使用这里设定的示例文字、大小和颜色。在您的页面上，阴影会落在您自己的字体、字号和背景上，因此请在完成前在原处检查效果。
我输入的内容会被保存或发送到服务器吗？
不会。示例文字、预览和 CSS 都在您的浏览器中生成。没有任何内容会被保存或发送到我们的服务器，因此请在离开页面之前复制声明。
资料来源
数据和文字最近核对于2026年11月10日星期二。