css文字渐变

作者：凌傲天发布日期:2026-05-29 浏览:6

/* 使用 CSS 实现文字渐变效果 */

h1 {
  /* 设置背景为线性渐变 */
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #ffd6a5, #fdffb6, #caffbf);

  /* 将背景颜色应用到文本上 */
  -webkit-background-clip: text;
  background-clip: text;

  /* 将文本颜色设置为透明，使背景渐变显示出来 */
  -webkit-text-fill-color: transparent;
}

解释说明：

background: linear-gradient(...): 定义了一个线性渐变背景，从左上到右下（45度角），颜色依次变化。
-webkit-background-clip: text 和 background-clip: text: 这两个属性将背景渐变限制在文本的范围内，只在文本部分显示渐变效果。
-webkit-text-fill-color: transparent: 将文本的颜色设置为透明，从而让背景渐变透过文本显示出来。

这个代码片段可以应用于任何文本元素（如 h1、p 等），以实现渐变文字效果。

上一篇：css背景渐变

下一篇：css字体样式