HTML | テキストにグラデーションを付ける

HTML,HTML テキスト

HTMLだけでテキストにグラデーションを付けるサンプルコードを紹介しています。

HTMLだけでテキストにグラデーションを付ける

HTMLだけでテキストにグラデーションを付けるには「style属性」に必要なプロパティを全て指定していきます。

テキストのグラデーションに最低限必要なプロパティと値は「color: transparent」「background: repeating-linear-gradient()」「-webkit-background-clip: text」になります。

<span style="font-size: 30px;
font-weight:bold;
color: transparent;
background: repeating-linear-gradient( 90deg, #4169e1 0, #90CAF9 100% );
-webkit-background-clip: text;">テキストにグラデーション</span>
テキストにグラデーション

サンプルコードでは他に「font-size」「font-weigh」プロパティも指定しています。

一度だけ出現するデザイン要素ならHTMLだけで記述してしまうのもアリかもしれません。
同じグラデーションを複数回使う場合は、CSSにて定義した方が良いと考えられます。