CSS实现文字字体颜色渐变的三种方法介绍

1

2

3

4

5

6

/*实现文字颜色从红到黄的线性渐变效果*/

.gradient-text {

  background: linear-gradient(to right, #ff0000, #ffff00); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/

  -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/

  -webkit-text-fill-color: transparent;/*给文字设置成透明*/

}

1

2

3

4

5

6

/*利用SVG图像实现文字颜色从蓝到白的渐变效果*/

.gradient-color {

  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><linearGradient id="Gradient"><stop offset="0%" stop-color="blue"/><stop offset="100%" stop-color="white"/></linearGradient><mask id="Mask"><text x="0" y="50%" dy=".35em">Gradients are awesome!</text></mask><rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient)" mask="url(#Mask)"/></svg>');

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

1

2

3

4

5

6

7

/*利用background-clip属性实现文字颜色从绿到白的渐变效果*/

.gradient-color {

  background-image: linear-gradient(to right, green, white);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}