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にて定義した方が良いと考えられます。