TEXT SHADOW STUDIO

给文字，
加一点空气感。

可视化生成 CSS text-shadow，支持多层阴影、透明度、预设、实时预览、Tailwind arbitrary value 和完整 CSS 导出。

2 LAYERSCSS TEXT-SHADOWTAILWIND VALUELOCAL ONLY

CONTROLS主阴影

PREVIEW TEXT

文字颜色

背景

字号56px

字重800

字距-3px

LAYERS

点击选择要编辑的层

ACTIVE LAYER

层名称

X 偏移0px

Y 偏移8px

模糊20px

颜色

透明度0.18

LIVE PREVIEWREADY

预览文字 Text-Shadow

text-shadow value

0px 8px 20px rgba(0, 0, 0, 0.18),
  0px 2px 4px rgba(0, 0, 0, 0.1)

CSS block

.text-shadow-preview {
  color: #22231f;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -3px;
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.18),
  0px 2px 4px rgba(0, 0, 0, 0.1);
}

Tailwind arbitrary

className="text-[56px] font-[800] tracking-[-3px] [text-shadow:0px_8px_20px_rgba(0,_0,_0,_0.18),_0px_2px_4px_rgba(0,_0,_0,_0.1)]"

REPORT

阴影参数，
一起导出。

输出包含完整 CSS、text-shadow value 和 Tailwind arbitrary 写法，方便复制到组件、样式表或设计记录里。

CSS PROFILELOCAL GENERATOR

BitLeap Text Shadow Studio

文本：预览文字 Text-Shadow
层数：2
字体大小：56px
字重：800
字距：-3px
文字颜色：#22231f

text-shadow:
0px 8px 20px rgba(0, 0, 0, 0.18),
  0px 2px 4px rgba(0, 0, 0, 0.1)

CSS:
.text-shadow-preview {
  color: #22231f;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -3px;
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.18),
  0px 2px 4px rgba(0, 0, 0, 0.1);
}

Tailwind arbitrary:
className="text-[56px] font-[800] tracking-[-3px] [text-shadow:0px_8px_20px_rgba(0,_0,_0,_0.18),_0px_2px_4px_rgba(0,_0,_0,_0.1)]"

MULTI LAYER

text-shadow 支持逗号分隔的多层阴影。多个硬阴影可以做 3D 字，多个模糊阴影可以做发光。

ALPHA FIX

颜色选择器只保存 6 位 Hex，透明度单独控制，最终输出 rgba，避免 8 位 Hex 在 input color 中失效。

DESIGN NOTE

阴影越强越容易降低可读性。正文建议使用轻阴影，海报标题才适合长投影和高亮发光。

BitLeap · 本地计算 · 隐私优先

阴影参数，一起导出。

阴影参数，
一起导出。