CSS文字渐变效果

在前端的web页面中想要使页面更加的美观，可以将页面中的文字进行美化。下面73so博客就介绍一种利用CSS来使文字进行渐变的效果，大家可以借鉴一下。

CSS使用文字可以渐变的效果

例：

<style>
.text-gradient {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 250px;
}
</style>
<div class="text-gradient">我的文字效果是渐变73so.com</div>

示例图：

代码解释：

1、css中的linear-gradient可以定义渐变的颜色以及方向

2、-webkit-background-clip: text;是以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。