文字色をグラデーションにする

文字色をグラデーションにするCSSです。
これはv3とv4やり方が違うので、どちらも解説します。

■ v3

1. 見出しウィジットのHTMLタグをspanにする。クラス名を「grad-text」としておく

2. 以下のCSSを入れる

HTML

<style>
.grad-text span{
	background: linear-gradient(to right, #DEB8F5, #BA42C0) !important; /* ここで角度と色を調整 */
	-webkit-background-clip: text!important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
}
</style>

<style>
.grad-text span{
	background: linear-gradient(to right, #DEB8F5, #BA42C0) !important; /* ここで角度と色を調整 */
	-webkit-background-clip: text!important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
}
</style>

※CSSコード内の「span」をお好みのHTMLタグに変更すれば、pでもh2でもできます。

■ v4

1. 見出しウィジットのクラス名を「grad-text」としておく

2. 以下のCSSを入れる

HTML

<style>
.grad-text{
	background: linear-gradient(to right, #DEB8F5, #BA42C0) !important;
	-webkit-background-clip: text!important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
}
</style>

<style>
.grad-text{
	background: linear-gradient(to right, #DEB8F5, #BA42C0) !important;
	-webkit-background-clip: text!important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
}
</style>