Skip to content

CSS linear-gradient 渐变色

偶然了解到了 CSS 的 linear-gradient,于是想用它将「糖加盐」进行字体渐变渲染。

效果:

糖加盐

CSS:

css
.jan{
    background: linear-gradient(to right, #39C5BB, #EE0000);
    -webkit-background-clip: text;
    color: transparent;
}

-webkit-background-clip: text 表示将背景剪切绘制在前景文字上。

color: transparent 表示 rgba(0,0,0,0),= #00000000,将字体的颜色设为透明。

#39C5BB 是 MIKU 的 苍绿色#EE0000 是 乐正绫的 阿绫红

图片分别来自 piapro萌娘百科

参考: