用css將文字套用漸層顏色。


h1{
  background: linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b);
  background: -webkit-linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

原理:

  1. 設定漸層背景 background: linear-gradient(~~);
  2. 設定背景裁切模式為文字 background-clip: text;
  3. 將文字顏色指定為透明 color: transparent;

參考資料