CSS 文字阴影（text-shadow）生成器
创建多层的 CSS text-shadow 效果：发光、描边、复古 3D 和浮雕文字。使用自己的文字实时预览，并可复制代码。
预设
图层
预览设置
预览
阴影
CSS 代码
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
相关工具
查看全部什么是 文字阴影生成器？
这个工具由一层或多层构建 CSS text-shadow 属性。每一层都有水平和垂直偏移、模糊、颜色和不透明度，预览会用你自己的示例文字渲染结果。
如何使用 文字阴影生成器
- 从发光、复古、描边或浮雕等预设开始，或保留默认阴影。
- 选中一个图层，设置“水平偏移”“垂直偏移”“模糊”“阴影颜色”和“不透明度”。
- 添加更多图层以制作描边或叠加的 3D 效果；删除不需要的图层。
- 输入你自己的“示例文字”，并选择文字和背景颜色以检查可读性。
- 复制 CSS 代码。
示例
输入
x 3px, y 3px, blur 0, color #ff0000, opacity 1
输出
text-shadow: 3px 3px 0 #ff0000;
何时使用 文字阴影生成器
适合标题、首屏文字、霓虹或复古效果，以及提高图片上文字对比度的细微阴影。对于大号文字的真正描边，-webkit-text-stroke 比叠加阴影效果更锐利；正文文字请避免使用浓重的阴影，因为它们会降低可读性。
文字阴影生成器 的工作原理
每一层都写作 x y blur color（text-shadow 没有扩展和内阴影）。偏移和模糊是 px 值，不透明度应用到颜色的 alpha 上，不透明的颜色用十六进制，否则用 rgba()。各层用逗号分隔；第一层绘制在最上面。描边预设在每个对角方向使用四个 1px 偏移，这是用纯 CSS 模拟文字描边的常见方法。
常见用例
- 霓虹发光标题
- 照片之上清晰可读的白色文字
- 复古叠加的 3D 标题
- 无需 SVG 的模拟文字描边
- 浮雕或凸版印刷风格的标签
常见问题
为什么没有扩展选项？
CSS text-shadow 属性只接受偏移、模糊和颜色。要让阴影看起来更粗，请叠加多个偏移较小的图层。
可以制作霓虹发光吗？
可以：使用零偏移，以及两到三层模糊逐渐增大的同色亮色阴影，就像“发光”预设那样。
text-shadow 会影响布局吗？
不会。阴影绘制在文字之外且不占用空间，所以永远不会移动周围的元素。