带实时预览的文字阴影生成器
这款文字阴影生成器以可视化方式构建 CSS text-shadow 属性，让你用滑块和颜色选择器设计阴影，而不必凭手感反复猜数值。调整偏移、模糊、颜色和不透明度，预览会随手即时更新。
它专为想要实现易读性投影、霓虹发光、立体 3D 效果或干净文字描边的前端开发者和设计师打造。你可以随意叠加任意数量的阴影图层，从内置预设起步，并一键复制可直接上线的 CSS。
文字阴影生成器使用方法
调整阴影控件
每个图层有五个控件：偏移 X（-50 到 50px）、偏移 Y（-50 到 50px）、模糊（0 到 100px）、通过选择器或 hex 设置颜色，以及不透明度（0% 到 100%）。拖动滑块，预览会实时响应。
添加更多图层
点击添加图层，叠加更多阴影来打造霓虹发光或火焰等效果。用眼睛图标启用或停用某个图层，用删除图标将其移除。
试试预设
从八种预设中任选其一 — 柔和、霓虹发光、复古3D、浮雕、描边、长投影、火焰或复古 — 加载现成的效果，再用滑块微调。
定制预览
点击预览文字即可输入自己的内容，然后设置字号（24 到 120px）、文字颜色、背景颜色和字体（sans-serif、serif、monospace 或 cursive），以匹配你的设计。
复制 CSS
生成的 text-shadow 属性会显示在代码块中。点击复制即可发送到剪贴板，直接粘贴到你的样式表里。
功能特点
多图层阴影
按需叠加任意数量的阴影图层，每层都有各自的偏移、模糊、颜色和不透明度。单独启用或停用某个图层，便于对比而不丢失设置。
可视化控件
偏移 X/Y、模糊和不透明度均配精准范围滑块，外加带 hex 输入的颜色选择器，精确匹配色值。
实时预览
每次更改都会在可编辑的预览文字上即时渲染，让你在复制任何一行代码前就看到真实效果。
8 种内置预设
从柔和、霓虹发光、复古3D、浮雕、描边、长投影、火焰或复古起步，再各自按喜好定制。
可定制预览
编辑文字，将字号设为 24 到 120px，更改文字和背景颜色，并在 sans-serif、serif、monospace 和 cursive 字体之间切换。
一键导出代码
干净的、以逗号分隔的 text-shadow CSS 已在代码块中备好 — 单击即可复制到剪贴板。
重置为默认值
随时把所有图层和预览设置清空回单个默认阴影，重新开始。
完全在浏览器中运行
无需账号、无需上传、不做追踪。一切都在本地完成，你的文字和样式都留在自己的设备上。
常见问题
如何用 CSS 给文字加阴影？
给文字元素应用 text-shadow 属性。每个阴影写作 offset-x offset-y blur-radius color，例如 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);。用这款生成器，你只需在滑块上设置这些值，再把完成的属性直接复制到 CSS 里即可。
text-shadow 各个数值是什么意思？
第一个值是水平偏移，第二个是垂直偏移，第三个是模糊半径（阴影看起来有多柔和），最后一个是颜色。偏移越大，阴影离文字越远；模糊越高，阴影越发散、越柔和。在本工具中，不透明度会被折算进颜色，作为 rgba() 的 alpha 值。
如何添加多层文字阴影？
CSS text-shadow 属性支持用逗号分隔的多个阴影。点击添加图层，想叠加多少都行 — 没有固定上限。简单效果只需一两层，而霓虹发光通常用三到四层相互叠加的图层。
如何做出发光或霓虹文字效果？
先加载霓虹发光预设作为起点。它会用同一种亮色叠加多个零偏移、模糊递增的图层，从而形成发光那种柔和的光晕。把预览切换到深色背景，再调整颜色和模糊，即可把强度调高或调低。
如何用 text-shadow 做立体 3D 或描边文字？
想要 3D 效果，可用复古3D或长投影预设，它们用零模糊的偏移图层叠加出立体感。想要描边，可用描边预设：它放置四个阴影 — 左、右、上、下 — 每个都用零模糊来勾勒每个字母的边缘。增大偏移值即可得到更粗的描边。
text-shadow 和 box-shadow 有什么区别？
text-shadow 把阴影应用到文字本身的字形上，因此会贴着每个字母的形状。box-shadow 则把阴影应用到元素的矩形盒子上。做排版文字效果用这款生成器；想给卡片或按钮加一圈阴影时，用 box-shadow 工具。
为什么我的阴影在不同字号下看起来不一样？
阴影值以像素为单位，而像素是绝对单位，所以 4px 的阴影在 24px 文字上看起来会比在 120px 文字上按比例显得更大。用字号滑块在你实际要发布的尺寸下预览阴影，再相应地调整偏移和模糊。
还没有评论，快来发表第一条！