Posts match “ text-gradients ” tag:

css text-gradients

授權方式(Auhorization): CC-BY 4.0

來源:
CREATE SEAMLESS TEXT GRADIENTS
Codepen

概念

  1. 先用linear-gradient 在background做出漸層效果 background: -webkit-linear-gradient(top,#fd0b58 0,#a32b68 100%);
  2. 接著使用background-clip，用text把background clip -webkit-background-clip: text;
  3. 最後把文字設成 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;
  }
}