コードは以下です。
See the Pen gradation_text by Naoto Yoshikawa (@nanaironanaoto) on CodePen.
あらためてコードを解説しますと、
肝心なのは、テキストのcolorスタイルではグラデーションをかけられないので、
inlineにした上で、ボックスの背景をグラデーションにし、そのボックスを-webkit-background-clipおよび-webkit-text-fill-colorで、テキストのマスクを行い、
結果的にテキストの型にグラデーションの背景を見せています。
display: inline-block;
background: rgb(126,237,255);
background: linear-gradient(93deg, rgba(126,237,255,0.8) 0%, rgba(126,237,255,1) 9%, rgba(255,86,246,1) 35%, rgba(152,231,246,0.6) 85%, rgba(240,255,86,0.7) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;グラデーションの色指定は”background: linear-gradient”から始まる、とても長い構文で指定していますが、この指定の書き方を暗記していなくてもよいです。
こちらのようなWebサービスで、スライダーで自分でグラデーションを作成して、出力されたCSSコードをコピーして貼り付ければOKです。
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
