CSS文字渐变

背景

CSS本身没有对于文字的渐变色支持，我们常见的渐变色一般都是背景色渐变。但如今的很多前端展示场景，出于美观的目的，都需要有渐变文字。

实现文字渐变

通过以下步骤可以实现CSS的文字渐变效果：

1. 设置文字区域的背景色
2. 将背景色裁剪成文字的前景色
3. 文字填充颜色变透明

代码如下：

background: linear-gradient(to bottom, #3b82f6, #10b981);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

效果图：

注意事项

• 当渐变文字需要倾斜展示时，如上图所示，文字会被切掉一部分。此时可以通过设置正的padding和负的margin来解决：

padding-right: 20px;
margin-right: -20px;

• 实际项目开发时可以将以上代码封装为fontGradient的mixin，方便复用。