用css做漸層文字
授權方式(Auhorization): CC-BY 4.0
來源:
CREATE SEAMLESS TEXT GRADIENTS
Codepen
概念
- 先用linear-gradient 在background做出漸層效果
background: -webkit-linear-gradient(top,#fd0b58 0,#a32b68 100%);
- 接著使用background-clip,用text把background clip
-webkit-background-clip: text;
- 最後把文字設成 trasparent
-webkit-text-fill-color: transparent;
CSS from codepen
.wrap {
margin: 200px auto;
width: 400px;
border: 1px dashed #ccc;
p {
padding: 40px;
font-family: 'Helvetica Neue';
font-size: 24px;
line-height: 30px;
background: -webkit-linear-gradient(top,#fd0b58 0,#a32b68 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}