本文目录
CSS 文字阴影的作用
CSS 的 text-shadow 属性为文字字符添加阴影效果。每个阴影由水平偏移、垂直偏移、模糊半径和颜色定义。与 box-shadow 不同，text-shadow 会精确贴合每个字符字形的轮廓，生成环绕字形而非矩形方框的效果。
你可以用逗号分隔的方式，在同一个元素上叠加多个阴影。这样便能实现霓虹辉光、浮雕字体、3D 立体和火焰文字等复杂效果——全部使用纯 CSS，无需任何图片或 canvas。生成器让你可以直观地构建并预览这些分层阴影。
使用文字阴影生成器
生成器提供了直观的控件，让你无需记忆 CSS 语法就能制作文字阴影。你可以实时调整每个参数，并即时在预览文字上看到效果。
- 偏移控件——拖动滑块或输入精确的像素值，设置水平（X）和垂直（Y）偏移，从而确定阴影相对于文字的位置
- 模糊半径——增大模糊值可得到柔和的辉光效果，或将其保持为零以获得锐利、清晰、宛如实心复本的阴影
- 多个图层——添加多个阴影图层并重新排序，即可创建轮廓、辉光和纵深等复杂的复合效果
免费试用 —— 无需注册
生成文字阴影 CSS →用文字阴影打造创意文字效果
文字阴影不仅仅用于细微的纵深效果。通过组合多个具有不同偏移、模糊值和颜色的阴影图层，你完全可以只用 CSS 创造出令人眼前一亮的视觉效果。
- 霓虹辉光——使用零偏移搭配较大的模糊半径和明亮的颜色（青、品红、荧光绿），并在多个图层中以递增的模糊反复叠加，即可模拟霓虹灯管的辉光
- 浮雕与压印——在中灰色背景上，将一个略微向右下偏移的浅色阴影与一个略微向左上偏移的深色阴影结合，可营造出压入金属的效果
- 3D 立体——叠加许多偏移量递增（1px 1px、2px 2px、3px 3px……）、颜色逐渐加深的阴影，即可创造出实心的三维立体文字效果
常见问题
text-shadow 会影响性能吗？
单个阴影对性能的影响可以忽略不计。但叠加许多带有大模糊半径的阴影（10 层以上、模糊 20px 以上）可能导致渲染变慢，在移动设备上尤为明显。对于复杂效果，请在目标设备上测试，并考虑只在标题上克制使用，而非用于正文文字。
哪些浏览器支持 text-shadow？
text-shadow 在所有现代浏览器中都有出色的支持，包括 Chrome、Firefox、Safari、Edge 及各移动端浏览器。它自 IE10 起便受支持，可以放心在生产环境中使用而无需回退方案。
text-shadow 可以用 CSS 过渡做动画吗？
可以。text-shadow 完全可以通过 CSS 过渡和关键帧动画来实现动画。你可以在不同的阴影状态之间平滑过渡，用于悬停效果、加载指示或吸引注意的动画。让各状态之间的阴影图层数量保持一致，可获得最流畅的过渡效果。