S̲
CSS 文字阴影
可视化调节 CSS text-shadow(偏移/模糊/颜色,支持多层),实时预览并复制。本地生成。
本地处理 · 不上传
加载工具中…
相关：文字阴影 · text-shadow · CSS阴影 · 字体阴影 · 霓虹字
CSS 文字阴影生成器调整偏移、模糊与颜色，支持多层叠加做出描边、浮雕与发光效果，实时预览并输出 text-shadow 代码。
使用步骤
- 调整偏移与模糊半径
- 设置阴影颜色
- 按需叠加多层
- 复制生成的 CSS
使用场景
- 让图片上的文字保持可读
- 制作标题的立体或浮雕效果
- 做霓虹发光文字
- 为浅色文字添加轮廓
小贴士
- 用四个方向、零偏移的小模糊阴影叠加可以模拟描边，是 text-stroke 兼容性不佳时的常用替代。
- 图片上的文字加一层半透明黑色阴影就能大幅提升可读性，比给整张图压暗更保留画面。
- 阴影层数越多渲染开销越大，滚动时可能掉帧，正文中应克制使用。
常见问题
和 -webkit-text-stroke 有什么区别？
text-stroke 是真正的描边，粗细均匀；多层 text-shadow 是拿模糊阴影模拟，边缘略软但兼容性更好，且可以同时叠加发光等其他效果。
阴影会影响布局吗？
不会。文字阴影绘制在文本盒子之外，不占空间，也不会推开相邻元素。
怎么做发光效果？
用零偏移、大模糊半径、与文字同色系的亮色，叠加两三层不同模糊半径即可。深色背景上效果最明显。
CSS 文字阴影是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 文字阴影，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。