如何使用linear-gradient实现文本背景多色渐变效果

下面分两种常见需求给出可直接复用的实现方案：

1. 文本所在区域背景渐变 #

适合需要给文字所在的块/行加渐变底色的场景，直接通过background属性配置多色渐变即可：

.text-block-bg {
  /* 语法：linear-gradient(渐变方向, 颜色1 位置占比, 颜色2 位置占比, 颜色3 位置占比...) */
  background: linear-gradient(90deg, #3494E6 0%, #EC6EAD 50%, #F7BB97 100%);
  /* 可选：调整内边距、圆角优化显示效果 */
  padding: 6px 10px;
  border-radius: 3px;
}

参数说明：

• 渐变方向可填写角度值（如90deg为从左到右）或方向描述（如to right、to bottom right）
• 颜色节点可任意添加，不写位置占比时浏览器会自动均匀分配各颜色的渐变区间
• 支持所有合法颜色值，包括十六进制、rgb、rgba、hsl等

如果仅需要文字覆盖的范围显示渐变底色，不需要占满整行，给元素添加display: inline属性即可。

2. 文字本身填充渐变效果 #

适合需要让文字颜色本身为多色渐变的场景，需要配合背景裁剪属性实现：

.text-color-gradient {
  /* 先配置多色渐变背景 */
  background: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 50%, #2BFF88 100%);
  /* 将背景裁剪到文字区域 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字设为透明透出渐变背景 */
  color: transparent;
  -webkit-text-fill-color: transparent;
}

注意事项：

• 该方案兼容所有主流现代浏览器，仅低版本IE浏览器不支持
• 渐变配置逻辑和第一种方案完全一致，可自由调整角度、增减颜色节点

内容的提问来源于stack exchange，提问作者Sparrow