html repeating-linear-gradient()でテキストにグラデーションを付ける
環境
Google Chrome 111.0.5563.65（Official Build）
Windows 10 Home 64bit
書式
repeating-linear-gradient() は CSS の関数で、反復線形グラデーションによる画像を生成します。
構文
/* 45 度方向に軸を延ばし、青で始め赤で終わり、3 回繰り返す反復グラデーション */
repeating-linear-gradient(45deg, blue, red 33.3%);
<side-or-corner> グラデーション線の開始点の位置。
<angle> グラデーション線の方向を角度で示します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: transparent;
background: repeating-linear-gradient( 90deg, #4169e1 0, #90CAF9 100% );
-webkit-background-clip: text;"
}
</style>
</head>
<body>
<p>東京tokyo</p>
</body>
</html>
結果
テキスト「東京tokyo」にグラデーションを付けます。