テキストをグラデーションにしてみましょう

CSSで美しいグラデーションをテキストにかけることができます。

ページのタイトルやアクセントにいかがですか？

<h1 title="SwellDesign">SwellDesign</h1>

タグで囲った表示したいテキストとtitleの中身を同じにします

h1, h1:before {
  position:absolute;
  top:0;
  left:0;
  color:#8AE2DA;
}

h1:before {
  display:block;
  content:attr(title);
  color:#80A7DB;
  -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
}

そしてCSSで擬似クラスにグラデーションマスクをして完成です。

See the Pen waVNRP by swelldesign (@w-swelldesign) on CodePen.

こんなかんじになりました！