CSS 文字阴影生成器（多图层）
颜色
CSS text-shadow 接受逗号分隔的阴影列表，而霓虹、3D 文字、描边、长阴影效果的关键就是用不同偏移、模糊、颜色叠加 2-20 层。本工具让你可视化构建这一栈：每层的 x/y/模糊/颜色滑杆、任意背景上的实时预览，以及 6 个起手预设（subtle、glow、neon、3D、outline、long-shadow）。输出为纯 text-shadow CSS — 粘贴到任何样式表即可。
—
预设
Hello
图层 (1)
CSS
text-shadow: 0px 0px 12px rgba(56,189,248,0.85); font-size: 72px; font-weight: 700; color: #ffffff;
使用方法
- 输入预览文字，选择字号、字重、文字色与背景。
- 选一个预设入手，点击图层小标签，拖动 x/y/模糊滑杆或修改颜色字符串。
- 点 + 添加图层，复制 CSS 粘贴到样式表。
常见问题
- outline 预设的原理？
- 在四个对角（±1px, ±1px）叠加 4 个零模糊阴影。这是 CSS 里伪造描边最便宜的方式 — 真正的方案是 `text-stroke`，但 WebKit 之外支持仍不稳定。
- 霓虹预设为何用 4 层？
- 一个有说服力的霓虹光晕至少需要 3 层：清晰的内白核心、强调色中模糊、更宽的柔光晕。第 4 层进一步扩展光晕。层数少则平、多于 5 只会增加绘制成本。
- 支持 rgba 颜色吗？
- 支持 — 任何 CSS 颜色值都能用：hex (#fff)、rgb()、rgba()、hsl()、hsla()、oklch() 与命名色。柔光阴影通常需要 alpha < 1，才会像「光晕」而非「污渍」。
- 层数过多影响性能？
- 每一层都是独立的合成操作 — 大标题上 20+ 模糊阴影每次绘制要多花几毫秒。正文没问题；超大 hero text 注意 DevTools 的绘制警告。