HELLO GRADIENT

效果：文字从左到右由红色渐变到金黄色。

进阶：多角度与多色渐变

CSS 渐变可以设置任意角度和多个色标，从而创造更丰富的文字质感。

.rainbow-text {
  background-image: linear-gradient(
    135deg,
    #ff0000,
    #ff7700,
    #ffff00,
    #00ff00,
    #0000ff,
    #8a2be2
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

通过调整色标位置，还可以做出条纹或分段渐变的文字效果：

.striped-text {
  background-image: linear-gradient(to right,
    #3e5151 0%,
    #3e5151 25%,
    #decba4 25%,
    #decba4 50%,
    #3e5151 50%,
    #3e5151 75%,
    #decba4 75%,
    #decba4 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

径向渐变文字

除了线性渐变，radial-gradient 同样可以用于文字，产生从中心向外发散的渐变效果。

.radial-text {
  font-size: 5rem;
  font-weight: 900;
  background-image: radial-gradient(circle at center, #e0c3fc 0%, #8ec5fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

添加动画：让文字“动”起来

文字渐变本身是固定的，但结合 CSS 动画（@keyframes）可以让背景的位置、角度或大小发生变化，从而产生流动的渐变效果。

流动的线性渐变文字

.flow-text {
  background-image: linear-gradient(
    90deg,
    #00dbde 0%,
    #fc00ff 50%,
    #00dbde 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 3s linear infinite;
}

@keyframes flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

通过 background-size 扩大背景，再用 background-position 移动背景位置，就能制造出流光溢彩的文字动画。

旋转渐变方向

也可以通过改变渐变角度或使用锥形渐变并配合动画来实现旋转效果。例如：

.rotate-text {
  background-image: conic-gradient(#553c9a 30%, #ee4b2b 40%, #ee4b2b 70%, #00a2ff 80%, #553c9a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rotateConic 4s linear infinite;
}

@keyframes rotateConic {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

这里没有直接移动背景位置，而是通过 hue-rotate 滤镜旋转色相，让锥形渐变的颜色循环变化，形成类似旋转的效果。注意：conic-gradient 兼容性略低于其他渐变，使用时需检查支持情况。

文字渐变的可访问性与注意事项

虽然文字渐变视觉华丽，但在实际项目中需要留意以下几点：

1. 文字作为装饰时使用

由于文字颜色被设为透明，如果背景因为任何原因无法加载（例如旧浏览器不支持 background-clip: text），文字会彻底消失。**因此，永远不要仅靠渐变来传达关键信息。**通常推荐将渐变文字用在标题或装饰性文本上，并保留纯色字体作为降级方案。

2. 降级兼容处理

可以为不支持该效果的浏览器设置一个纯色文字颜色作为回落。利用 @supports 特性查询可以优雅降级：

.fallback-text {
  color: #ff6b6b; /* 兜底文字颜色 */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .fallback-text {
    background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

这样，在不支持的浏览器中，文字至少会显示为 #ff6b6b 的纯色，不会丢失可见性。

3. 对选择文本的可读性

当用户选中文字时，由于 color: transparent，高亮区域可能看不到文字。可以定义 ::selection 伪元素来覆盖选中状态的颜色：

.gradient-text::selection {
  color: white;
  background-color: rgba(0,0,0,0.8);
}

实战案例：卡片标题的渐变文字

以下是一个完整的卡片组件，标题使用渐变文字效果，并带有悬停动效。

<div class="card">
  <h2 class="card-title">探索无限可能</h2>
  <p class="card-description">CSS 渐变文字让设计更加出彩。</p>
</div>

.card-title {
  font-size: 2.5rem;
  font-weight: 800;
  background-image: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.5s ease;
  display: inline-block; /* 确保尺寸与文字一致 */
}

.card-title:hover {
  background-position: right center; /* 悬停改变渐变位置 */
}

/* 可选降级 */
@supports not (background-clip: text) {
  .card-title {
    color: #a18cd1;
    background: none;
  }
}