グラデーション文字

文字をグラデーションにするには以下のコードを使う

background: linear-gradient(0deg, rgba(198, 198, 198, 1), rgba(255, 255, 255, 1));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color: transparent;

グラデーションはlinear-gradientの値を修正してください

影をつける時は注意

「text-shadow」で影をつけると文字が暗くなるので使わない。
-webkit-text-fill-color: transparent は文字本体が透明になり、その背後のグラデーションが見える仕組み。通常、text-shadow は不透明な文字の後ろに描かれるが、文字が透明だと影が文字の形の中にも透け、黒影で文字が暗く見える。

使う場合は「filter: drop-shadow」を使えば暗くならない。

filter: drop-shadow(0px 0px 0.1em rgba(0, 0, 0, 0.4));