css 文字渐变色

作者：渚寒烟淡发布日期:2026-05-23 浏览:119

/* 使用 CSS 实现文字渐变色 */

h1 {
  /* 将背景设置为渐变色 */
  background: linear-gradient(45deg, #ff7e5f, #feb47b);

  /* 使用 -webkit-background-clip 和 -webkit-text-fill-color 实现文字渐变效果 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

解释说明：

background: linear-gradient(45deg, #ff7e5f, #feb47b);:
- 这行代码设置了元素的背景为线性渐变色，从左下到右上（45度角）由 #ff7e5f 渐变到 #feb47b。
-webkit-background-clip: text;:
- 这个属性使得背景颜色只在文字的范围内显示，而不是整个背景区域。它将背景裁剪为文字的形状。
-webkit-text-fill-color: transparent;:
- 这个属性将文字的颜色设置为透明，从而让背景渐变色透过文字显示出来。

通过这三行代码的组合，可以实现文字的渐变色效果。

上一篇：css字体间距

下一篇：css var