CSS 实现文字颜色渐变
前言
我经常将自己的一些突发奇想的设计到自己的博客上尝试。博客首页右侧的热门文章的小工具上的文本颜色一直没找到满意的，于是想试试渐变色的文本会不会有不错的效果。
文本渐变色实现
background-clip
这种实现的主要思路就是对 background 进行裁剪。background-clip 提供了一个 text 属性，可以将背景裁剪成文本的前景色（即只有文本覆盖的部分有背景色），然后我们再将文本颜色设置为 transparent 即可以实现文本颜色的渐变。background-clip 的 text 属性目前仍然是实验功能，需要使用 -webkit-background-clip 才能生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-color-gradient</title>
<style>
.text-color-gradient {
display: inline-block;
font-size: 10em;
font-weight: 700;
background: linear-gradient(0.25turn, #c21500, #ffc500);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div class="text-color-gradient">
Clloz
</div>
</div>
</body>
</html>
mask-image
第二种方法是使用 mask-image 配合伪元素做一个渐变遮罩层。如果我们的渐变是 color A 到 color B，我们可以将文本颜色设为 A，然后用伪元素（content 与元素文本相同）配合 mask-image 做一个渐变的遮罩层，渐变是从 transparent 到 color B，然后我们将伪元素覆盖到原来的文本上，就能得到想要的渐变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-color-gradient</title>
<style>
.text-color-gradient {
display: inline-block;
font-size: 10em;
position: relative;
color: #ffc500;
}
.text-color-gradient[data-text]::after {
content: attr(data-text);
color: #c21500;
position: absolute;
left: 0;
z-index: 2;
-webkit-mask-image: linear-gradient(0.25turn, #c21500, transparent);
}
</style>
</head>
<body>
<div style="text-align: center;">
<div class="text-color-gradient" data-text="Clloz">
Clloz
</div>
</div>
</body>
</html>
关于渐变色
关于渐变色推荐一个网站：uigradients，该网站有很多不错的渐变色搭配。另外还有一个软件aquarelo，可以查看渐变色，也支持导出。
总结
这就是我实现渐变的两种方法，总的来说还是第一种方法比较简单好用，并且可以设置两种以上颜色的渐变。mask-image 的 linear-gradient 取值似乎必须要一个 transparent ，并且只能有两个颜色。综合而言还是使用第一个方式比较好。
参考文章
本博客所有内容采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
转载文章请注明：CSS 实现文字颜色渐变 - https://www.clloz.com/programming/front-end/css/2020/08/26/css-text-color-gradient/
Clloz
人生をやり直す
