CSS 与前端开发工具

Text Shadow Generator

输入预览文字,实时调整 text-shadow 并复制可用的 CSS 声明。

参数设置

浏览器本地处理

实时预览

参数修改后自动更新
可直接选择或复制

为自定义文字生成实时阴影,调整偏移、模糊、颜色与透明度。

输入内容仅在您的浏览器中处理,不会上传到服务器。

这个工具是什么

Text Shadow Generator 为文字字形添加阴影,支持偏移、模糊、颜色和透明度。预览文字以普通文本显示,即使包含 HTML 标签,也不会作为页面代码执行。

如何使用

  1. 输入希望查看的预览文字。
  2. 调整水平偏移、垂直偏移和非负模糊半径。
  3. 选择阴影颜色与透明度,观察实时文字效果。
  4. 复制 CSS,或点击“重置”恢复初始参数。

使用示例

  • 小偏移和较低透明度适合轻微文字投影。
  • 偏移为 0、模糊较大时,可尝试柔和的发光效果。
  • 输入中文、英文或符号,可以比较不同字形的阴影。
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

原理与 CSS 说明

text-shadow 的结构是 offset-x offset-y blur-radius color。它作用于文字字形,不包含 spread-radius,也没有 inset。阴影颜色使用验证后的通道和透明度组成。

常见用途

  • 调试标题和海报文字效果。
  • 为品牌文案制作柔和阴影。
  • 理解文字阴影与盒子阴影的参数差异。

隐私说明

所有输入、计算、CSS 生成和预览都在当前浏览器中完成,不会上传用户内容,不使用后台、数据库、在线 API 或第三方 CDN,也不会自动保存您的输入。

FAQ

text-shadow 和 box-shadow 有什么区别?

text-shadow 沿文字字形绘制,box-shadow 作用于元素盒子。

text-shadow 为什么没有 spread?

标准 text-shadow 语法只提供两个偏移、可选模糊和颜色,没有扩散半径。

可以设置多个 text-shadow 吗?

CSS 可以用逗号连接多层文字阴影;本页专注于稳定生成单层阴影。

预览文字中的 HTML 会执行吗?

不会。预览使用文本节点显示输入,标签和脚本字样只会被当作文字。

返回开发者工具分类首页