Softonic

CSS文本阴影生成器

步 1 / 2
生成 CSS

在 DevTools 中凭肉眼调试 text-shadow 声明也能用，但一旦需要柔和的新拟物光晕、复古双层投影，或大标题上清晰的 1 像素描边时，就只能靠反复试错了。这款生成器让你精确设置 X 轴偏移、Y 轴偏移、模糊半径和 RGBA 颜色，并复制一行可直接粘贴的 CSS。

如何创建文本阴影

  1. 1

    设置偏移量

    X表示水平偏移量（单位：像素），Y表示垂直偏移量。正值Y会使阴影向下移动，负值Y则使其向上移动。

  2. 2

    选择模糊半径

    模糊度0会产生清晰的轮廓；数值越高，阴影效果越渐变。常见的柔焦效果通常使用4–12像素的模糊度。

  3. 3

    选择颜色

    使用 RGBA 字符串可调节透明度；`rgba(0,0,0,0.35)`是实现浅色背景上细腻深度效果的稳妥默认值。

  4. 4

    复制声明

    该工具会输出 `text-shadow: Xpx Ypx Blurpx color;`，将它放入样式表中对应的选择器即可。

实际效果出色的文字阴影设计模板

文字阴影由四个数字和一种颜色组合而成。牢记这一点，你几乎可以实现杂志或落地页中的任何视觉效果。

速查表

效果 声明
淡淡的层次感 text-shadow: 0 1px 2px rgba(0,0,0,0.25);
柔和投影 text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1 像素描边 text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
复古双层 text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
霓虹光晕 text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

层叠多个阴影

text-shadow 接受以逗号分隔的列表。浏览器按画家算法、依源码顺序绘制，列表中最后一个阴影位于最底层。利用这一点可以模拟描边（在上下左右四个方向各放一个 1 像素的硬阴影），或叠加一个清晰的近处阴影和一个扩散的远处阴影来营造层次感。

何时不该用文本阴影

  • 对于极小的正文文字，模糊度超过 2 像素会让字形显得糊成一团。建议改用 -webkit-font-smoothing 并加强对比度。
  • 对于性能敏感的大标题动画，避免叠加超过三层阴影；每多一层，浏览器就要把文字重新光栅化一次。
  • 如果需要在复杂路径（曲线、旋转）上让阴影紧贴字形，可以考虑改用 SVG 的 <filter> 配合 feDropShadow，它能更精确地贴合字形轮廓。

常见问题

该设计仅生成单个阴影层。如需叠加效果，请多次运行生成器，并用逗号分隔结果（例如：text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);）。

text-shadow遵循渲染文本的字形轮廓；box-shadow则遵循元素的矩形边界框。两者采用相似参数，但分别针对完全不同的形状进行光栅化处理。

浏览器会将文本阴影按设备像素网格进行光栅化处理。在2倍缩放的显示屏上，模糊度为0的阴影会在亚像素位置显示，看起来略显柔和；将模糊度调整为1通常能有效消除这种效果，同时不会改变视觉表现力。

您输入的值会被发送到我们的服务器以生成声明，但不会被存储或复用。在多步骤视图中，这些值通过页面链接在步骤间传递；在单页面视图中，不会有任何内容被保留，刷新页面后所有内容都会消失。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本