纯CSS实现渐变色背景和渐变色文字样式

开发者
浏览 loading

CSS渐变色背景色

demo

纯CSS渐变效果示例

纯CSS渐变色背景样式代码

1
2
3
4
5
<div style="
background: linear-gradient(145deg, #FFEE33 0%, #FF2299 100%);
">
    纯CSS渐变效果示例
</div>

纯CSS渐变色背景代码讲解

background 设置背景色

linear-gradient 设置线性渐变

145deg 渐变的角度

#FFEE33 0%, #FF2299 100% 渐变开始颜色和位置，渐变结束颜色和位置

CSS渐变色文字

demo

纯CSS渐变效果示例

纯CSS渐变色文字样式代码

1
2
3
4
5
6
7
<div style="
    background: linear-gradient(90deg, #aaff04 1%, #04aaff 50%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
">
    纯CSS渐变效果示例
</div>

纯CSS渐变色文字代码讲解

background: linear-gradient 通过背景色来设置文字的渐变色（意味着如果你要给容器设置渐变后还要给文字设置渐变色那你就要多加一层结构。）

-webkit-text-fill-color: transparent; 指定文本的填充色，设置为透明这样就不会填充颜色而使用背景色。

-webkit-background-clip: text; 将背景色应用到文字上【debug】这段代码必须写到背景色后面，不然会失效。

注：截止 2024-08-12，text-fill-color 在chrome还不支持，必须带上引擎标识

Relay Tips: 一极乐（ https://yijile.com/zh/css-linear-gradient-background-and-text/ ）