如何在CSS中制作文字阴影渐变_text-shadow @keyframes实现

文字阴影渐变效果可以通过结合 CSS 的 text-shadow 与 @keyframes 动画实现，让文字看起来具有动态发光、浮动或呼吸感。虽然 text-shadow 本身不支持渐变色，但通过叠加多层阴影并配合动画，可以模拟出类似渐变光晕的视觉效果。

1. 基础 text-shadow 多层阴影设置

要实现“渐变”般的阴影，关键是使用多个不同颜色和模糊半径的 text-shadow 叠加。例如：

.glow-text {
  color: #fff;
  text-shadow:
    0 0 5px #ff00a0,
    0 0 10px #ff00a0,
    0 0 20px #ff00a0,
    0 0 40px #ff00a0;
}

这种写法通过重复同一颜色但增加模糊值，形成由内到外逐渐扩散的“光晕”效果，视觉上接近渐变。

2. 使用 @keyframes 制造动态变化

为了让阴影“动”起来，比如产生呼吸或脉冲效果，可以使用 @keyframes 改变 text-shadow 的模糊强度或颜色透明度。

立即学习“前端免费学习笔记（深入）”；

先见AI

数据为基，先见未见

下载

@keyframes pulse-glow {
  0% {
    text-shadow:
      0 0 5px rgba(255, 0, 160, 0.5),
      0 0 10px rgba(255, 0, 160, 0.5),
      0 0 15px rgba(255, 0, 160, 0.5);
  }
  100% {
    text-shadow:
      0 0 10px rgba(255, 0, 160, 0.8),
      0 0 20px rgba(255, 0, 160, 0.8),
      0 0 30px rgba(255, 0, 160, 0.8);
  }
}

.pulse-text {
  color: #fff;
  animation: pulse-glow 1.5s ease-in-out infinite alternate;
}

这里利用 rgba() 控制颜色透明度，并在关键帧中改变模糊半径和透明度，实现柔和的明暗脉动。

3. 模拟彩色渐变光效

若想让文字阴影呈现多种颜色的渐变光圈，可手动叠加不同颜色的阴影：

.rainbow-glow {
  color: #ffffff;
  text-shadow:
    0 0 10px #f00,
    0 0 20px #ff7b00,
    0 0 30px #ff0,
    0 0 40px #0f0,
    0 0 50px #00f;
  animation: rainbow-pulse 2s infinite alternate;
}

@keyframes rainbow-pulse {
  from {
    text-shadow:
      0 0 5px #f00,
      0 0 10px #ff7b00,
      0 0 15px #ff0,
      0 0 20px #0f0,
      0 0 25px #00f;
  }
  to {
    text-shadow:
      0 0 15px #f00,
      0 0 30px #ff7b00,
      0 0 45px #ff0,
      0 0 60px #0f0,
      0 0 75px #00f;
  }
}

此方法适合用于霓虹灯风格的文字标题，搭配深色背景效果更佳。

4. 注意事项与优化建议

• 避免过度使用高模糊值，可能导致页面性能下降或文字边缘发虚。
• 推荐在 background: black 或深色背景下使用此类效果，增强对比。
• 动画频率不宜过快，1.5s ~ 3s 的周期更适合阅读体验。
• 考虑添加 will-change: text-shadow 提升动画流畅度（仅对频繁动画元素使用）。

基本上就这些。通过巧妙组合 text-shadow 与 @keyframes，即使不借助图片或 SVG，也能做出炫酷的文字发光渐变动画。