CSS | テキストにグラデーションをかける方法

2021-11-20CSS グラデーション,CSS テキスト,CSS

CSSでlinear-gradient()やrepeating-linear-gradient()を使ってテキストの色にグラデーションをかける方法を紹介しています。

See the Pen CSS | Responsive Text by yochans (@yochans) on CodePen.

テキストに2色のグラデーション

repeating-linear-gradient()を利用してテキストの色に2色グラデーションを付けるサンプルコードになります。

サンプルではrepeating-linear-gradient()を使用していますが、サンプルと同様に一回のグラデーションで0%から100％までを指定する場合、linear-gradient()でも問題ありません。

まず、テキストのフォントカラーには「transparent（透明）」を指定します。

repeating-linear-gradient()はテキストの背景色に対して指定する事になりますが、background-clipにて透過しているテキストでクリップし、テキスト部分のみにグラデーション部分が反映されるようにします。

<p class="gradation">Gradation</p>

.gradation {
	margin: 20px 0;
	font-size: 10vw;
	text-align:center;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 90deg, #4169e1 0, #90CAF9 100% );
	-webkit-background-clip: text;
}

repeating-linear-gradient()は以下のように指定します。

位置指定を追加する事でグラデーションの変化具合を変更する事が可能です。

repeating-linear-gradient( グラデーションの角度, 色 位置, 色 位置 );
repeating-linear-gradient( 90deg, #4169e1 0, #90CAF9 100% );

テキストにツートンカラーのグラデーション

最初の色の開始を0％、終わりを50％、次の色の開始を50％、終わりを100%とする事で中央でくっきり色の違うツートンカラーを作成することが可能です。

<p class="gradation">Gradation</p>

.gradation {
	margin: 20px 0;
	font-size: 10vw;
	text-align:center;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 90deg, #4169e1 0 50%, #90CAF9 50% 100% );
	-webkit-background-clip: text;
}

テキストに3色以上のグラデーション

グラデーションする色を追加指定する事で3つ以上の色を使ったグラデーションを作成する事が可能です。

<p class="gradation">Gradation</p>

.gradation {
	margin: 20px 0;
	font-size: 10vw;
	text-align:center;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 90deg, #4169e1 0 35%, #da70d6 45% 55% ,#f08080 60% 100%);
	-webkit-background-clip: text;
}

テキストに透過色を含むグラデーション

色コードのかわりに「transparent」を指定する事で透過色を使ったグラデーションを作成する事が可能です。

<p class="gradation">Gradation</p>

.gradation {
	margin: 20px 0;
	font-size: 10vw;
	text-align:center;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 90deg, #4169e1 0 35%, #da70d6 45% 55% ,transparent 80% 100%);
	-webkit-background-clip: text;
}

テキストに円形グラデーション

グラデーションにradial-gradient()またはrepeating-radial-gradient()を使ってテキストにも円形グラデーションを指定する事も可能です。

円形グラデーションは開始位置がデフォルトで中央に設定されます。（変更可能）

<p class="gradation">Gradation</p>

.gradation {
	margin: 20px 0;
	font-size: 10vw;
	text-align:center;
	font-weight:bold;
	color: transparent;
	background: repeating-radial-gradient(#da70d6 0 15px, #4169e1 15px 30px);
	-webkit-background-clip: text;
}