CSS 文字阴影生成器
可视化生成 CSS text-shadow：多层阴影增删（每层独立设置水平 / 垂直偏移、模糊与颜色），配合文字内容、字号、字重、文字色与背景色实时预览，输出 text-shadow 与完整 class 片段，内置 6 个预设。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
预览区的背景色可以单独调整，方便看清阴影
UniKit
预设
点击预设直接套用阴影层，字号与颜色保持不变
文字
32px
700
阴影层
最多 6 层，排在前面的盖在后面之上，用逗号分隔
层 1
CSS 代码
.text-shadow {
font-size: 32px;
font-weight: 700;
color: #111827;
text-shadow: 0px 2px 6px rgba(15, 23, 42, 0.35);
}这个工具能做什么
- 调标题、Logo、卡片文案的立体感：拖几层阴影实时看效果，满意了直接复制现成的 CSS。
- 一次生成描边、霓虹发光、3D 堆叠这类多层 text-shadow，手写这些偏移量很容易出错。
- 预览背景可以单独换色，深色文字配浅底、浅色文字配深底都能当场验证对比度。
- 拿不准字号字重时顺手把 font-size、font-weight、color 一起生成，粘进样式表就能用。
示例
输入
字号 32px、字重 700、文字色 #111827，一层阴影 0 2 6 #0F172A59
输出
.text-shadow {
font-size: 32px;
font-weight: 700;
color: #111827;
text-shadow: 0px 2px 6px rgba(15, 23, 42, 0.35);
}带透明度的阴影颜色会自动转成 rgba()：8 位 hex 的末两位是透明度，0x59 / 255 ≈ 0.35。
常见问题
为什么我填的 8 位颜色变成了 rgba()？
颜色只支持 hex 写法（#RGB、#RGBA、#RRGGBB、#RRGGBBAA）。只要透明度小于 1，输出就会用 rgba() 表示；完全不透明时则输出 6 位 hex，因为这样更短也更兼容。
多层阴影的顺序会影响结果吗？
会。text-shadow 里排在前面的层画在后面的层之上，所以描边那类效果要把四向偏移写在前面。最多支持 6 层，超过会报错。
模糊值能填负数吗？
不能。模糊半径小于 0 在 CSS 里本来就不合法，工具会把它夹到 0；水平/垂直偏移可以是负数，用来往左上方向投影。
生成的代码能直接用吗？
可以，复制的是完整的 class 片段（默认选择器 .text-shadow），包含 font-size、font-weight、color 和 text-shadow 四条声明。改选择器名请直接改复制出来的那段文本。
关键词：csstext-shadow文字阴影描边文字霓虹字3d 文字发光阴影生成器前端样式typography