css text gradient color, css fonts gradient color

css text gradient color, css fonts gradient color css 字体渐变色 -webkit-background-clip & -webkit-text-fill-color

css text gradient color, css fonts gradient color

css 字体渐变色

demo

 

gradient text & gradient background

-webkit-background-clip & -webkit-text-fill-color

.class{
background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.entry-title {
font-size: 50px;
font-weight: 500;
margin: 20px 0;
border-top: 2px solid #ecd018;
border-bottom: 2px solid #ecd018;
line-height: 1.4;
padding: 20px 0;
background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/xgqfrms/p/10897934.html">
        shit mint-ui & vue mobile ui components
</a>
</h1>

.postTitle {
background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: word-color-animation 5s infinite linear;
}

---